Nested Component Example 3

 Sharing data between nested components is possible using following things:

 1.Input decorator
     ->this is used to declare an input property to achieve property binding
       syntax:
          @Input()
           <propname>:<type>;
     ->this can be used with in innercomponent [childcomponent] to receive data from outer component [parentcomponent]

 2.Output decorator
      ->this is used to declare an output property to achieve event binding
      ->this can be used with in inner component to send data to outter component 
      ->this should be applied to Event Emitter class

Event Emitter class
      This is used to declare a custom event
      ->syntax:
          @Output()
           <eventname>=new EventEmitter<type>();
                                         |
                                     payload type
      ->event name can receive an address of a method, it acts like a
        function pointer.
      ->emit method is used to call a method maintained by eventemitter
         this.<eventname>.emit(data);

Count Component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
  selector: 'app-students-count',
  templateUrl: './students-count.component.html',
  styleUrls: ['./students-count.component.css']
})
export class StudentsCountComponent {
  @Input()
  all: number | undefined;
  @Input()
  male: number | undefined;
  @Input()
  female: number | undefined;
  selectedRadioButtonValue: string = 'All';
  // The Output decorator makes the property of an Component as an Output property
  // The EventEmitter class in Angular 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);
  }
}



Count Component. html


<span>Show : </span>
<input name='options' type='radio' value="All"
       [(ngModel)]="selectedRadioButtonValue"
       (change)="onRadioButtonSelectionChange()">
<span>{{'All(' + all + ')'}}</span>
<input name="options" type="radio" value="Male"
       [(ngModel)]="selectedRadioButtonValue"
       (change)="onRadioButtonSelectionChange()">
<span>{{"Male(" + male + ")"}}</span>
<input name="options" type="radio" value="Female"
       [(ngModel)]="selectedRadioButtonValue"
       (change)="onRadioButtonSelectionChange()">
<span>{{"Female(" + female + ")"}}</span>




Grid Component. ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-students-grid',
  templateUrl: './students-grid.component.html',
  styleUrls: ['./students-grid.component.css']
})
export class StudentsGridComponent {
  students: any[] = [
    {
        ID: '1', FirstName: 'Rajakonda Uday', LastName: 'Kumar',
        DOB: '12/8/1990', Gender: 'Male', CourseFee: 12334.56
    },
    {
        ID: '2', FirstName: 'Kittu', LastName: 'R',
        DOB: '10/14/1989', Gender: 'Male', CourseFee: 6666.00
    },
    {
        ID: '3', FirstName: 'abc', LastName: 'd',
        DOB: '7/24/1992', Gender: 'Female', CourseFee: 6543.15
    },
    {
        ID: '4', FirstName: 'def', LastName: 'd',
        DOB: '8/19/1990', Gender: 'Female', CourseFee: 9000.50
    },
    {
        ID: '5', FirstName: 'ads', LastName: 'df',
        DOB: '4/12/1991', Gender: 'Male', CourseFee: 9876.54
    }
];
selectedStudentCountRadioButton: string = 'All';
getTotalStudentsCount(): number {
  return this.students.length;
}
getMaleStudentsCount(): number {
  return this.students.filter(std => std.Gender === 'Male').length;
}
getFemaleStudentsCount(): number {
  return this.students.filter(std => std.Gender === 'Female').length;
}
onStudentCountRadioButtonChange(selectedRadioButtonValue: string): void {
  this.selectedStudentCountRadioButton = selectedRadioButtonValue;
}
}


Grid Component.html


<app-students-count [all]="getTotalStudentsCount()"
[male]="getMaleStudentsCount()"
[female]="getFemaleStudentsCount()"
(countRadioButtonSelectionChanged)="onStudentCountRadioButtonChange($event)">
</app-students-count>
<br/><br/>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>DOB</th>
            <th>Course Fee</th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngFor="let student of students;">
            <tr *ngIf="selectedStudentCountRadioButton=='All' ||
                       selectedStudentCountRadioButton==student.Gender">
            <td>{{student.ID | uppercase}}</td>
            <td>{{student.FirstName | uppercase}}</td>
            <td>{{student.Gender}}</td>      
            <td>{{student.DOB | date:'dd/MM/y'}}</td>
            <td>{{student.CourseFee | currency:'USD':true:'1.2-2'}}</td>
        </tr>
    </ng-container>
        <tr *ngIf="!students || students.length==0">
            <td colspan="10">
                No Students to display
            </td>
        </tr>
    </tbody>
</table>



Output