A lot of times you might stuck in a situation when you have tell the parent that something has happened in the children and if you are new to Angular 2 (Or coming from Angular 1 background) you might be scratching your head on how to do this. This has not been talked about in the QuickStart guide of the Angular 2 tutorials. And if you do not want to spend significant time going through the documentation to figure this out yourself, this is the correct place to catch up.
Actually Angular 2 handles this quite amazingly. Way better than Angular 1 for sure. Here is what I am going to do to show you how it is achieved -
1. Create A parent component with some template
2. Child component which is used in the parent component template
3. EventEmitter object in child component that emits some value to parent when a certain event is raised
So let’s begin -
First, lets create parent component. Here I have created a sample component -
1: import { Component, OnInit } from '@angular/core';
2: import { TranslationService } from './service/translation.service';
3: import { TestService } from './service/test.service';
4:
5: @Component({
6: moduleId: module.id,
7: selector: 'test2',
8: templateUrl: './test2.html',
9: providers: [TestService]
10: })
11:
12: export class Test2 implements OnInit {
13:
14: constructor(private testService: TestService) {
15: }
16:
17: ngOnInit(): void {
18: }
19:
20: addNewEntry(event) {
21: console.log(event);
22: }
23:
24: }
For now forget about service provider, that is not in the scope of this article. Let us look at addNewEntry function. It simply takes an event as input. Let us now dive in the Html template of this component.
1: <add-object (onNewEntryAdded)="addNewEntry($event)"></add-object>
So we just have one line here with add-object attribute. add-object is our child component. Notice that we have added an event to this attribute called onNewEntryAdded, and this is handled in our addNewEntry function where we pass the event. Now let us go in the child component to see how we create and raise this event there.
This is our addObject html class -
1: <div class="form-group">
2: <div class="row">
3: <div class="col-sm-12">
4: <button type="button" class="btn btn-default" (click)="addNewEntry()">Add new entry</button>
5: </div>
6: </div>
7: </div>
As you can see we have a button which is handled in addNewEntry method in the component when clicked. So far, so simple. Here is our child component -
1: import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
2:
3: @Component({
4: moduleId: module.id,
5: selector: 'add-object',
6: templateUrl: './add-object.html',
7: outputs:['onNewEntryAdded']
8: })
9:
10: export class AddObject implements OnInit {
11:
12: //@Input()
13: public newObject: string;
14:
15: //@Output()
16: public onNewEntryAdded = new EventEmitter();
17:
18: ngOnInit(): void {
19: this.newObject = "Test";
20: }
21:
22: addNewEntry(): void {
23: this.onNewEntryAdded.emit({
24: value: this.newObject
25: })
26: }
27: }
The important things needed to be imported from core for this are – Output and EventEmitter
As you can see we have a string object and an EventEmitter object called onNewEntryAdded. If you see up this is the same event that we have handled in parent component. This can either be decorated with @Output() decorator (Which I have commented out in this snippet) OR with outputs property in @Component decorator (Which I have used) But remember not both!
That’s basically all. When the button is clicked, in button event handler, you simply call emit function of our EventEmitter and set our string object to value. This value can be read in parent with event.value in the eventhandler of onNewEntryAdded event.
Tada! And you are ready to handle children event in parent components. Quite simple!
Posted
Nov 16 2016, 12:12 PM
by
Indraneel Pole