Angular Custom Events
In my last post I covered passing data into components via custom properties. In this post I’ll deal with passing data out of components via custom events …
Let’s say we want to implement a component to capture a name, telephone number and email address. Our component code initially looks like this …
@Component({
selector: "contactinput",
template: `
<div>
<div><input #contactname type="text" placeholder="Enter name" /></div>
<div>
<input #contacttele type="text" placeholder="Enter telephone" />
</div>
<div><input #contactemail type="text" placeholder="Enter email" /></div>
<button>Save</button>
</div>
`
})
export class ContactComponent {
constructor() {}
}However, want to expose a save event so that the consumer of this component can do something with the captured name, telephone number and email address. We want to reference the component like this …
<contactinput (save)="saveContact($event)"></contactinput>So, we need to expose a custom event called save. Here’s how we do this …
import { Component, Output, EventEmitter } from "angular2/core";
@Component({
selector: "contactinput",
template: `
<div>
<div><input #contactname type="text" placeholder="Enter name" /></div>
<div>
<input #contacttele type="text" placeholder="Enter telephone" />
</div>
<div><input #contactemail type="text" placeholder="Enter email" /></div>
<button
(click)="
handleClick(contactname.value, contacttele.value, contactemail.value)
"
>
Save
</button>
</div>
`
})
export class ContactComponent {
@Output() save: EventEmitter<any> = new EventEmitter();
constructor() {}
public handleClick(name: string, tele: string, email: string): void {
this.save.next({ name: name, telephone: tele, emailAddress: email });
}
}We declare save as a property in our ContactComponent class on line 16. We need to prefix the property with the Output annotation. This tells angular that this is a property that can output data. We need to import the Output annotation on line 1. The type of the property is an EventEmitter. More info on EventEmitter can be found in the angular docs. On line 21, we trigger the next save event, passing the name, telephone number and email address to the consumer.
So, we can now consume the component as follows …
@Component({
selector: "my-app",
directives: [ContactComponent],
template: `
<contactinput (save)="saveContact($event)"></contactinput>
`
})
export class AppComponent {
private saveContact(contact) {
console.log(contact);
}
}… which results in the name, telephone number and email address being output to the console when the save button is clicked.
If you to learn more about TypeScript, you may find my free TypeScript course useful:
