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.
- What is a nested component?
- What is a container component?
- Example to understand container and nested components in angular.
In our next two articles, we will discuss the following things
- How to pass data from the nested component to container component?
- How to pass data from the container component to the nested component?
- What are component input and output properties?
- 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.
Registration Open For New Online Training
Enhance Your Professional Journey with Our Upcoming Live Session. For complete information on Registration, Course Details, Syllabus, and to get the Zoom Credentials to attend the free live Demo Sessions, please click on the below links.
Not Working .studentTitle didn’t find .Plz fix the error
I don’t use studentTitle in this example. Kindly check and if still you have any issue kindly share your component.ts and component.html code.
{{student.FirstName | studentTitle:student.Gender}} plz explain this line of code on your student-list.component.html
I’m getting this error when i run this program
ERROR in src/app/Student/student-list/student-list.component.html:16:39 – error NG8004: No pipe found with name ‘studentPipe’.
16 {{student.FirstName | studentPipe:student.Gender}}
~~~~~~~~~~~
Hey, please remove the code | studentTitle:student.Gender and check. This is a type error. Thanks for identifying the issue.
I already check it but still not working
Error: The selector “app-student-list” did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.js:1160)
at locateHostElement (core.js:12266)
at ComponentFactory$1.create (core.js:34122)
at ApplicationRef.bootstrap (core.js:43172)
at core.js:42760
at Array.forEach ()
at PlatformRef._moduleDoBootstrap (core.js:42756)
at core.js:42711
at ZoneDelegate.invoke
Thank you for your response
bootstrap: [StudentListComponent]=>bootstrap: [AppComponent,StudentListComponent]
selector in app.component.html as directives then it works
Nice app
this does not work……
getting this error….
Error: The selector “app-student-list” did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.js:1160)
at locateHostElement (core.js:12266)
at ComponentFactory$1.create (core.js:34122)
at ApplicationRef.bootstrap (core.js:43172)
at core.js:42760
at Array.forEach ()
at PlatformRef._moduleDoBootstrap (core.js:42756)
at core.js:42711
at ZoneDelegate.invoke
how does this look when coded?
bootstrap: [StudentListComponent]=>bootstrap: [AppComponent,StudentListComponent]
selector in app.component.html as directives then it works
Looking forward for complete Angular topics, Please post it soon _/\_
it does not work- please help:
ERROR Error: The selector “app-student-list” did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.js:670)
at locateHostElement (core.js:9804)
at ComponentFactory$1.create (core.js:25092)
at ApplicationRef.bootstrap (core.js:29646)
at core.js:29338
at Array.forEach ()
at PlatformRef._moduleDoBootstrap (core.js:29338)
at core.js:29308
at ZoneDelegate.invoke (zone.js:372)
at Object.onInvoke (core.js:28680)
go to index.html and place in the body.
in index.html
<!—->
write this in body of index.html
*ngFor doesn’t recognise students for the loop, for the life of me I can’t figure this out
simply put this in the body of index.html , then it works
simply put below code in the body of index.html then it works.