Nested Component Example 1

 Following user Interface

We have two components now. 

Open  terminal and then type ng g c StudentsGrid  --flat

.ts Changes (students-grid.component)

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

    }

];

}

Let us create one more component for count

.ts Changes students-grid.component

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

@Component({

  selector: 'app-students-count',

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

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

})

export class StudentsCountComponent {

  all: number = 5;

  male: number = 3;

  female: number = 2;

}

Here, we have set the selector=’app-student-count’. So, we can use this selector as a directive where we want to use this component. We are going to use this StudentCountComponent within the StudentGridComponent using the app-student-count selector as a directive.

appModule.ts

students-count.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>

Now, we need to nest the StudentCountComponent in StudentGridComponent and to do so, we need to use the StudentCountComponent selector (i.e. app-students-count) as a directive i.e. <app-student-count></app-students-count> on StudentGridComponent..

StudentGrid.html

<app-students-count></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>

Output