In Angular, events are actions or occurrences detected by the application that can trigger functionality or behaviour in response.
Angular provides various ways to handle events, including event binding, event emitters, and RxJS Observables.
Event binding allows us to listen for and respond to DOM events directly in our template.
Event binding is denoted by enclosing the event name in parentheses ( ) within the HTML template.
We can bind events using Angular's event binding syntax (event)="handler()".
import { Component } from '@angular/core';
@Component({
selector: 'app-your-component',
template: '<button (click)="onClick()">Click me</button>'
})
export class YourComponent {
onClick() {
console.log('Button clicked');
}
}
Event emitters are used to emit custom events from a child component to its parent component. They are often used in scenarios where child components need to communicate with parent components.
// child Component
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: '<button (click)="onClick()">Click me</button>'
})
export class ChildComponent {
@Output() onEmitClick:EventEmitter<void> = new EventEmitter<void>();
onClick() {
this.onEmitClick.emit();
}
}
// Parent Template
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: '
<div>
<h1>Parent Component</h1>
<app-child (onEmitClick)="onChildButtonClick()"></app-child>
</div>'
})
export class ParentComponent {
onChildButtonClick() {
console.log('Button in child component clicked');
}
}
Components can emit custom events using EventEmitter to communicate with parent components or trigger actions in response to user interactions. Custom events are defined as `@Output` properties in the child component and emitted using the `emit()` method.
In the Child Component, we have imported `Output` and `EventEmiiter` from `@angular/core`. we have created a custom EventEmitter function `onEmitClick` and assigned it to `@Output`. Now, the child component is emitting the `onEmitClick` function.
The child component emits the `onEmitClick` function and we can listen to that function in the parent component template. we have mapped the `onEmitClick` emitter with the `onChildButtonClick` function of the Parent component.
Now, when we click on the `onClick` function from the Child Component. we can listen to that emit in the Parent Component function 'onChildButtonClick'.
import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Component({
selector: 'app-my-component',
template: '<button (click)="clickSubject.next()">Click me</button>'
})
export class MyComponent {
clickSubject = new Subject<void>();
constructor() {
this.clickSubject.subscribe(() => {
console.log('Button clicked');
});
}
}
RxJS Observables provide a powerful way to handle asynchronous events and data streams in Angular applications.
They can be used to handle user input events, HTTP responses, and other asynchronous operations.
Angular provides several mechanisms for handling events in your application.
Whether we're responding to user interactions, communicating between components, or managing asynchronous operations, Angular's event-handling features offer flexibility and power to build responsive and interactive applications.