Skip to main content

Event Handlers and Functions

Event Handlers and Functions folder includes events and functions.

Event Handlers​

Event handlers are actions or occurrences (such as user interactions or component lifecycle changes) that components can detect and respond to.

Events allow seamless communication between components, user interactions, and application logic.

Example of standard DOM events: click, input, change, mouseover, etc.

<button (click)="handleClick()">Click **Me**</button>

(click) is an event binding that calls handleClick() when the button is clicked.

Key Characteristics of an Event Handler​

  • Triggered by UI events (e.g., onClick, onChange).
  • Directly attached to UI elements to handle user interactions.
  • Does not return values; typically executes logic based on the event.
  • Receives an event object containing event-related data.

Functions​

Functions are blocks of reusable code designed to perform specific tasks that are not necessarily tied to a UI event. Functions can be invoked from the component's view template, other event handlers and functions, enabling modular and efficient code execution.

Functions can be invoked from the view (interface/master layout/components), other functions, and event handlers using the Call Function construct.

The user can add input parameters, output param, and variables in a function.

Input Parameters: Accept a value when calling the function.

Output Param: The value that a function returns after execution. This value can be used by the caller for further processing.

Variables: A named storage location that holds a value which can be changed during execution. Acts as a container for data, allowing developers to store, retrieve, and manipulate information.