Handling Events in Angular

In this post we will talk about event handling in Angular.

Handle events

To handle events, use parenthesis:

<button (click)="onSendMessage()">Send Message</button>

Name elements

To give a name to an element use #nameOfTheElement Its a template reference, this can then used in other parts of the template to retrieve this element.

For example, when can use it in a input object to obtain the data as it is typed in and send it to a function:

<input class="demo" (keyup)="onKeyUp(titleInput.value)" #titleInput>

Generate components

To generate a new component, run the command

ng generate component <name-of-the-component>

Add inputs for components

Include Input from @angular/core in your custom component. Add a new member to the class:

@Input()
title: string;

Then you can pass data from the custom component tag:

<custom-component [title]="data.title"></custom-component>

You can also name your input something else inside your component by specifying a name inside the Input brackets:

@Input('myTitle')
title: string;

<custom-component [myTitle]="data.title"></custom-component>

Add outputs for custom events in components

Include Output from @angular/core in your custom component. Add a new member to the class of the component:

@Output()
itemSelected = new EventEmitter<Class>();

In this case, <Class> is the return type of the output. Then somwhere on your custom component code you emit the event, it could be inside a function that is called from a button:

this.itemSelected.emit(this.item);

this.item corresponds to the variable of type Class you defined on the EventEmitter that you want to pass.

Then from where you instance your custom component, in the custom tag you can access the data like this:

<custom-component (itemSelected)="onItemSelected($event)"></custom-component>

(itemSelected) is the custom event defined within the custom component. onItemSelected is the function that you will call from within the current component, and the special $event receives the data that the custom event is sending.

Then you can handle that in a function:

onItemSelected (item:Class) {
  // ...
}

You can also specify a different name for the event emitter while also using a different variable name in the custom component:

@Output('itemSelected')
itemEmitter = new EventEmitter<Class>();

// ...

someFunction () {
  this.itemEmitter.emit(this.item);
}

But you can still handle the event as itemSelected from the component tag:

<custom-component (itemSelected)="onItemSelected($event)"></custom-component>