Nested Component Example 2 (Input Properites)

How to Pass data from Parent Component to Child Component.

Now, we will pass , all, male and female these properties values to Parent Component.

To do this, we need to we need to decorate the StudentCountComponent properties (all, male and female) with @Input() decorator.

first, you need to import it from the @angular/core. 

.ts Changes (CountComponent)

import { Component, Input } from '@angular/core';

@Component({

  selector: 'app-students-count',

  templateUrl: './students-count.component.html',

  styleUrls: ['./students-count.component.css']

})

export class StudentsCountComponent {

  @Input()

  all: number;

  @Input()

  male: number;

  @Input()

  female: number;

How to Pass data from the parent component to the child component?

Modify the 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

    }

];

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;

}

}

The points to remember is that in the filter method we are using the triple equals (===) instead of the double equals (==). The meaning single, double and triple equals in TypeScript are as follows

1. = Assign a value
2. == Compare two values
3. === Compare two values and their types

.Html Changes

<app-students-count [all]="getTotalStudentsCount()"

[male]="getMaleStudentsCount()"

[female]="getFemaleStudentsCount()"></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>

        <tr *ngFor='let student of students'>

            <td>{{student.ID | uppercase}}</td>

            <td>{{student.FirstName}}</td>

            <td>{{student.Gender}}</td>      

            <td>{{student.DOB | date:'dd/MM/y'}}</td>

            <td>{{student.CourseFee | currency:'USD':true:'1.2-2'}}</td>

        </tr>

        <tr *ngIf="!students || students.length==0">

            <td colspan="10">

                No Students to display

            </td>

        </tr>

    </tbody>

</table>

Student count component.html

<span>Show : </span>

<input type="radio" name="options" />

<span>{{"All(" + all + ")"}}</span>

<input name="options" type="radio">

<span>{{"Male(" + male + ")"}}</span>

<input name="options" type="radio">

<span>{{"Female(" + female + ")"}}</span>

Output