Angular 2 [PART-9 ] Angular component input properties

Examle for geting data for employee filter radio buttons
[all,male,female]

Steps
*Add property Input in chiled Component (filteremployeelist.component.ts)
@Input()
all : number;

@Input()
male : number;

@Input()
female : number;

*Add function for get data in parent Component(listemployee.component.ts)
getTotalEmployeesCount(): number{
return this.employees.length;
}
getTotalMaleEmployeesCount(): number{
return this.employees.filter(e => e.gender === “Male”).length;
}
getTotalFemaleEmployeesCount(): number{
return this.employees.filter(e => e.gender === “Female”).length;
}

*call functions from chiled initial
(<app-filteremployeelist></app-filteremployeelist>)
in parent Html page (listemployee.component.html)

<app-filteremployeelist [all]=”getTotalEmployeesCount()”
[male]=”getTotalMaleEmployeesCount()”
[female]=”getTotalFemaleEmployeesCount()”
></app-filteremployeelist>

Leave a Reply

Your email address will not be published. Required fields are marked *