Angular component output properties

Text version of the video http://csharp-video-tutorials.blogspot.com/2017/07/angular-component-output-properties.html 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 YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 Slides http://csharp-video-tutorials.blogspot.com/2017/07/angular-component-output-properties_25.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists 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]