Angular Container and Nested Components

Back to: Angular Tutorials For Beginners and Professionals

Angular Container and Nested Components

In this article, I am going to discuss the Angular Container and Nested Components in detail. Please read our previous article where we discussed Angular two way data Binding with examples. As part of this article, we are going to discuss the following important pointers.

1. What is a nested component?
2. What is a container component?
3. Example to understand container and nested components in angular.

In our next two articles, we will discuss the following things

1. How to pass data from the nested component to container component?
2. How to pass data from the container component to the nested component?
3. What are component input and output properties?
4. How to create custom events using Event Emitter class?

Example:

We are going to create the following user interface to understand all the above concepts.

As shown in the above image, we have a table that displays a list of students.  You can also see that, above the table, we have 3 radio buttons i.e. All, Male and Female and next to each radio button we also display the count of students as shown below.

All(5) radio button has the total count of students i.e. both male and female students. Male(3) radio button has the total count of male students and similarly, the Female(2) radio button has the total count of female students.  

At the moment the All(5) radio button is selected, so all the students (both male and female) are displayed in the table. But, if we select the Male(3) radio button, then only the 3 male students to be displayed in the table. Similarly, if we select the Female(2) radio button then only the female students to be displayed in the table.

How to achieve the above requirement?

To achieve the above requirement, we need to create two components. One component will display the list of students in a table while the other component will display the radio buttons and the count of students.

To display the list of students, we will create a component called StudentListComponent and to display the radio buttons along with their total count of students, we will create a component with the name StudentCountComponet.

Then we will nest the StudentCountComponet within the StudentListComponet and when we do so, then the StudentCountComponet becomes the nested component or the child component and StudentListComponet becomes the container component or parent component. For better understanding please have a look at the following image. 

Let us implement this step by step:

Step1: Creating StudentList Component

To create the StudentList component, open visual studio code terminal and then type ng g c StudentList and press enter as shown below.

Once you press enter key, then it will create a folder with the name student-list within the app folder with four files as shown in the below image.

Modify student-list.component.ts file:

Open student-list.component.ts file and then copy and paste the following code in it. Here, we simply create an student array.

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

@Component({
  selector: 'app-student-list',
  templateUrl: './student-list.component.html',
  styleUrls: ['./student-list.component.css']
})
export class StudentListComponent {

  students: any[] = [
    {
        ID: 'std101', FirstName: 'Pranaya', LastName: 'Rout',
        DOB: '12/8/1988', Gender: 'Male', CourseFee: 1234.56
    },
    {
        ID: 'std102', FirstName: 'Anurag', LastName: 'Mohanty',
        DOB: '10/14/1989', Gender: 'Male', CourseFee: 6666.00
    },
    {
        ID: 'std103', FirstName: 'Priyanka', LastName: 'Dewangan',
        DOB: '7/24/1992', Gender: 'Female', CourseFee: 6543.15
    },
    {
        ID: 'std104', FirstName: 'Hina', LastName: 'Sharma',
        DOB: '8/19/1990', Gender: 'Female', CourseFee: 9000.50
    },
    {
        ID: 'std105', FirstName: 'Sambit', LastName: 'Satapathy',
        DOB: '4/12/1991', Gender: 'Male', CourseFee: 9876.54
    }
];

}

Modify student-list.component.css file

Open student-list.component.css file and then copy and paste the following code in it.

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;
}

Creating StudentCountComponent:

To create the StudentCount component, type ng g c StudentCount in the visual studio code terminal and then press the enter key as shown in the below image.

Once you press the enter button, then it will create a folder with the name student-count within the app folder with four files as shown in the below image.

Modifying student-count.component.ts file:

Open the student-count.component.ts file and then copy and paste the following code in it. As you can see, here we created three variables to hold the count.

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

@Component({
  selector: 'app-student-count',
  templateUrl: './student-count.component.html',
  styleUrls: ['./student-count.component.css']
})
export class StudentCountComponent {

  all: number = 5;
  male: number = 3;
  female: number = 2;

}

Here, we have set the selector=’app-student-countt’. 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 StudentListComponent using the app-student-countt selector as a directive.

Within the StudentCountComponent, we declare 3 properties (all, male and Female) and at the moment we have hard-coded the values for these properties. In our next article, we will discuss how to pass the values to these properties from the container component i.e. from the StudnetListComponent.

Modifying student-count.component.css file:

Open student-count.component.css file and then copy and paste the following code in it.

.radioClass {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}

Modifying app.module.ts file:

In order to use the StudentCountComponent and StudnetListComponent component, you need to register it in the app.module.ts file. If you are creating the component using Angular CLI as we did, then the angular framework automatically register these components within the app.module.ts file. So, the complete code in app.module.ts file is shown below. But you need to change bootstrap: [StudentListComponent].

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentCountComponent } from './student-count/student-count.component';

@NgModule({
  declarations: [
    AppComponent,
    StudentListComponent,
    StudentCountComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [StudentListComponent]
})
export class AppModule { }

Modify student-count.component.html file:

Open student-count.component.html file and then copy and paste the following code in it.

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

As you can see in the above HTML, we have 3 radio buttons and bound them to the 3 properties (all, male, female) that we have in the component (StudentCountComponent) class. Here, we are using the interpolation technique for data-binding. 

Modify the student-list.component.html file:

Now, we need to nest the StudentCountComponent in StudentListComponent and to do so, we need to use the StudentCountComponent selector (i.e. app-student-count) as a directive i.e. <app-student-coun></app-student-coun> on StudentListComponent.. So, open student-list.component.html file and then copy and paste the following code in it.

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

That’s it. We have done with the first phase of our implementation. At this point, if you run the application, then you should see the student count radio buttons and the student list. Except that nothing is going to work.

In the above example, we have hardcoded the student counts within the StudentCountComponent. In the next article, we will discuss how to pass the student count values from the container component i.e. from the StudentListComponent to the nested component i.e. StudentCountComponent.  

In this article, I try to explain the Angular Container and Nested Components with an example. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.