Angular 2 container and nested components

Suggested Videos
Part 17 - Angular ngFor trackBy | Text | Slides
Part 18 - Angular Pipes | Text | Slides
Part 19 - Angular custom pipe | Text | Slides

In this video and in the next few videos we will discuss

• What is a nested component 
• What is a container component 
• Passing data from the nested component to container component 
• Passing data from the container component to nested component
• Along the way we will discuss component input and output properties
• Creating custom events using EventEmitter class
• What is ng-container directive and it's use

We will use the following example to understand all of the above concepts. Notice we have a table that displays a list of employees. 



Above the table we have 3 radio buttons. Next to each radio button we also have the count of employees. 


All(5) radio button has the total count of employees. Male(3) radio button has the total count of male employees and the Female(2) radio button has the total count of female employees. 

At the moment All(5) radio button is selected, so all the employees are displayed in the table. If I select Male(3) radio button, then only the 3 male employees should be displayed in the table. Along the same lines,if Female(2) radio button is selected only the female employees should be displayed.

As we develop this example, we will understand all the following concepts.

• What is a container and nested component 
• Passing data from the nested component to container component and vice-versa
• Component input and output properties
• Creating custom events using EventEmitter class
• What is ng-container directive and it's use

What is a container and nested component : In the example below, we have 2 components

One of the component displays the list of employees. We have already built this component in our previous videos in this series. We named this component EmployeeListComponent.

The other component displays the radio buttons and the count of employees. We have not created this component yet. We will create it in this video. We will call this component EmployeeCountComponent.

We will nest EmployeeCountComponent in EmployeeListComponent. So EmployeeCountComponent becomes the nested component or child component and EmployeeListComponent becomes the container component or parent component.



We have already implemented the required code for EmployeeListComponent in our previous videos as shown below.

employeeList.component.ts

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

@Component({

    selector: 'list-employee',

    templateUrl: 'app/employee/employeeList.component.html',

    styleUrls: ['app/employee/employeeList.component.css']

})

export class EmployeeListComponent {

    employees: any[];

    constructor() {

        this.employees = [

            {

                code: 'emp101', name: 'Tom', gender: 'Male',

                annualSalary: 5500, dateOfBirth: '6/25/1988'

            },

            {

                code: 'emp102', name: 'Alex', gender: 'Male',

                annualSalary: 5700.95, dateOfBirth: '9/6/1982'

            },

            {

                code: 'emp103', name: 'Mike', gender: 'Male',

                annualSalary: 5900, dateOfBirth: '12/8/1979'

            },

            {

                code: 'emp104', name: 'Mary', gender: 'Female',

                annualSalary: 6500.826, dateOfBirth: '10/14/1980'

            },

            {

                code: 'emp105', name: 'Nancy', gender: 'Female',

                annualSalary: 6700.826, dateOfBirth: '12/15/1982'

            },

        ];

    }

}

employeeList.component.html

<table>

    <thead>

        <tr>

            <th>Code</th>

            <th>Name</th>

            <th>Gender</th>

            <th>Annual Salary</th>

            <th>Date of Birth</th>

        </tr>

    </thead>

    <tbody>

        <tr *ngFor="let employee of employees;">

            <td>{{employee.code | uppercase}}</td>

            <td>{{employee.name | employeeTitle:employee.gender }}</td>

            <td>{{employee.gender}}</td>

            <td>{{employee.annualSalary | currency:'USD':true:'1.3-3'}}</td>

            <td>{{employee.dateOfBirth | date:'dd/MM/y'}}</td>

        </tr>

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

            <td colspan="5">

                No employees to display

            </td>

        </tr>

    </tbody>

</table>

employeeList.component.css

table {

    color: #369;

    font-family: Arial, Helvetica, sans-serif;

    font-size: large;

    border-collapse: collapse;

}

td {

    border: 1px solid #369;

    padding:5px;

}

th{

    border: 1px solid #369;

    padding:5px;

}

Now let's create the EmployeeCountComponent. Add a new TypeScript file to the employee folder. Name it employeeCount.component.ts. Copy and paste the following code.

employeeCount.component.ts

• We have set select='employee-count'. We can use this selector as a directive where we want to use this component. We are going to nest this component inside EmployeeListComponent using employee-count selector as a directive.
• We have 3 properties (all, male and Female). At the moment we have hard coded the values. In our next video we will discuss how to pass the values for these properties from the container component i.e from the EmployeeListComponent.

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

@Component({

    selector: 'employee-count',

    templateUrl: 'app/employee/employeeCount.component.html',

    styleUrls: ['app/employee/employeeCount.component.css']

})

export class EmployeeCountComponent {

    all: number = 10;

    male: number = 5;

    female: number = 5;

}

Add a new StyleSheet to the employee folder. Name it employeeCount.component.css. Copy and paste the following style class.

employeeCount.component.css

.radioClass {

    color: #369;

    font-family: Arial, Helvetica, sans-serif;

    font-size: large;

}

Now let's add the view template for EmployeeCountComponent. Add a new HTML page to the employee folder. Name it employeeCount.component.html. Copy and paste the following html.

employeeCount.component.html

Notice we have 3 radio buttons and bound them to the 3 properties (all, male, female) we have in the component class. We are using interpolation for data-binding.

<span class="radioClass">Show : </span>

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

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

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

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

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

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

Nest EmployeeCountComponent in EmployeeListComponent component. To do this, use EmployeeCountComponent selector (employee-count) as a directive <employee-count></employee-count> on EmployeeListComponent component as shown below.

<employee-count></employee-count>

<br /><br />

<table>

    <thead>

        <tr>

            <th>Code</th>

            <th>Name</th>

            <th>Gender</th>

            <th>Annual Salary</th>

            <th>Date of Birth</th>

        </tr>

    </thead>

    <tbody>

        <tr *ngFor="let employee of employees;">

            <td>{{employee.code | uppercase}}</td>

            <td>{{employee.name | employeeTitle:employee.gender }}</td>

            <td>{{employee.gender}}</td>

            <td>{{employee.annualSalary | currency:'USD':true:'1.3-3'}}</td>

            <td>{{employee.dateOfBirth | date:'dd/MM/y'}}</td>

        </tr>

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

            <td colspan="5">

                No employees to display

            </td>

        </tr>

    </tbody>

</table>

Finally, declare EmployeeCountComponent in module.ts file. Please make sure you import the component first and then add it to the declarations array of @NgModule decorator.

import { EmployeeCountComponent } from './employee/employeeCount.component';

@NgModule({

    imports: [BrowserModule, FormsModule],

    declarations: [AppComponent, EmployeeComponent,

        EmployeeListComponent, EmployeeTitlePipe, EmployeeCountComponent],

    bootstrap: [AppComponent]

})

export class AppModule { }

At this point, run the project and you should see employee count radio buttons and the employee list.

At the moment the employee counts are hard coded with in the EmployeeCountComponent. In our next video we will discuss how to pass the count values from the container component i.e from the EmployeeListComponent to the nested component i.e EmployeeCountComponent.