Angular 8 Session 6: Nested Components In Angular

Nested Components

A component with in another component called as Nested Component.

Nested defines a parent-child relationship.

Here, the one calls another component termed as Parent Component and the one being called as Child Component.

In this example we have one main component (app.component) and child component (employee.component) as shown in below diagram.

Creating of child component

Step 1: Here we are creating the child component “employee” using angular cli using the below command.

          ng g c Employee/employee-list

Step 2: Create an interface as model for employee i.e. ng g interface Model/IEmployee 

IEmployee.ts

} interface IEmployee {

    EmployeeId: number;

    EmployeeName: string;

    Gender: string;

    EmailId: string;

    Department: string;

}

Step 3: Generate and initialise an employee list in child component.

employee-list.component.ts

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

@Component({

  selector: 'app-employee-list',

  templateUrl: './employee-list.component.html',

  styleUrls: ['./employee-list.component.css']

})

export class EmployeeListComponent implements OnInit {

  employeeList: IEmployee[];

  constructor() { }

  ngOnInit() {

    this.employeeList = [

      { EmployeeId: 10001, EmployeeName: "Radha Mohan", Department: "IT", EmailId: "radha.mohan@domain.com", Gender: "Male" },

      { EmployeeId: 10002, EmployeeName: "Himanshu Sekhar", Department: "Finance", EmailId: "himanshu.sekhar@domain.com", Gender: "Male" },

      { EmployeeId: 10002, EmployeeName: "Saanvi", Department: "HR", EmailId: "saanvi.rs@domain.com", Gender: "Female" }

    ];

  }

} 

Step 4: Design corresponding html to render employees.

employee-list.component.html

<div align="center" style="padding-top: 2em;">

    <table width="50%">

        <thead>

            <tr style="padding:10px;">

                <th>Employee Id</th>

                <th>Employee Name</th>

                <th>Gender</th>

                <th>Email Id</th>

                <th>Department</th>

            </tr>

        </thead>

        <tbody>

            <tr *ngFor="let emp of employeeList">

                <td>{{emp.EmployeeId}}</td>

                <td>{{emp.EmployeeName}}</td>

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

                <td>{{emp.EmailId}}</td>

                <td>{{emp.Department}}</td>

            </tr>

        </tbody>

     </table>

</div> 

Step 5: Register employee-list component in app.module.ts.

app.module.ts

import { EmployeeListComponent } from './Employee/employee-list/employee-list.component';

@NgModule({

  declarations: [

    AppComponent,

    EmployeeListComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent] 

}) 

Nesting child with parent component

Append the child selector in parent.

<div align="center">

    <h1>Welcome to {{myData}}Details Application</h1>

</div>

<div>

    <app-employee-list></app-employee-list>

</div>