Angular component output properties 

Text version of the video
csharp-video-tu...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our RU-vid channel. Hope you can help.
/ @aarvikitchen5572
Slides
csharp-video-tu...
Angular 2 Tutorial playlist
• Angular 2 tutorial for...
Angular 2 Text articles and slides
csharp-video-tu...
All Dot Net and SQL Server Tutorials in English
www.youtube.co...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
Search Tags
angular 2 component output example
angular 2 component output event
angular 2 component output properties
angular child component output
angular2 child component call parent function
angular2 eventemitter between components
angular2 eventemitter callback
angular2 eventemitter child
angular2 eventemitter emit
angular2 eventemitter import
eventemitter in angular2
angular2 eventemitter not working
angular2 eventemitter sample
angular2 eventemitter tutorial
angular2 eventemitter typescript
In this video we will discuss
1. How to pass user actions or user entered values or selections from the child component to the parent component using output properties.
2. We will discuss creating custom events using angular EventEmitter class
3. What is ng-container directive and it's use
At the moment when we click the radio buttons, nothing happens. Here is what we want to do.
All(6) radio button is clicked - Display all the employees in the table
Male(4) radio button is clicked - Display the 4 Male employees in the table
Female(2) radio button is clicked - Display the 2 Female employees in the table
To achieve this we are going to make use of component output properties. First let's look at the changes required in the nested component i.e EmployeeCountComponent.
The changes required in employeeCount.component.ts are comented and self-explanatory
// Import Output and EventEmitter
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'employee-count',
templateUrl: 'app/employee/employeeCount.component.html',
styleUrls: ['app/employee/employeeCount.component.css']
})
export class EmployeeCountComponent {
@Input()
all: number;
@Input()
male: number;
@Input()
female: number;
// Holds the selected value of the radio button
selectedRadioButtonValue: string = 'All';
// The Output decorator makes the property an Output property
// EventEmitter class is used to create the custom event
// When the radio button selection changes, the selected
// radio button value which is a string gets passed to the
// event handler method. Hence, the event payload is string.
@Output()
countRadioButtonSelectionChanged: EventEmitter[string] = new EventEmitter[string]();
// This method raises the custom event. We will bind this
// method to the change event of all the 3 radio buttons
onRadioButtonSelectionChange() {
this.countRadioButtonSelectionChanged.emit(this.selectedRadioButtonValue);
}
}
The following are the changes required in the view template of EmployeeCountComponent i.e employeeCount.component.html. Notice we have made 3 changes on each radio button
1. value attribute is set to (All, Male or Female)
2. Implemented 2 way data-binding using the ngModel directive. Notice ngModel is bound to selectedRadioButtonValue property in the component class. This 2 way data-binding ensures whenever the radio button selection changes, the selectedRadioButtonValue property is updated with the value of the selected radio button.
3. onRadioButtonSelectionChange() method is binded to "change" event of the radio button. So this means whenever, the selection of the radio button changes, onRadioButtonSelectionChange() method raises the custom event "countRadioButtonSelectionChanged". We defined this custom event using Angular EventEmitter class.
[span class="radioClass"]Show : [/span]
[input name='options' type='radio' value="All" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"]
[span class="radioClass"]{{'All(' + all + ')'}}[/span]
[input name="options" type="radio" value="Male" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"]
[span class="radioClass"]{{"Male(" + male + ")"}}[/span]
[input name="options" type="radio" value="Female" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"]
[span class="radioClass"]{{"Female(" + female + ")"}}[/span]