Best resource for Online free Education
In this article, I am going to discuss the Angular Nested Components with Examples. Please read our previous article where we discussed Template vs TemplateURL in Angular Application. Here in this article, first, we will learn how to create angular nested components and then we will see how to pass the data from the parent component to the child component.
Note: The point that you need to keep in mind is, putting all the features in one component is not a great idea because when the application grows it will be very difficult to maintain as well as difficult to unit test. So what you need to do here is, you need to split the large component into a number of smaller sub-components, where each subcomponent will focus on a specific task.
What are Angular Nested Components?
The Angular framework allows us to use a component within another component and when we do so then it is called Angular Nested Components. The outside component is called the parent component and the inner component is called the child component.
Understanding Nested Components in Angular Application:
Let us discuss how to create and use a nested component in the angular application with one example. Assume that you have a component called StudentComponent and you want to use this Student Component inside the AppComponent which is our root component. Our requirement is that we need to displays the student details as shown in the below image.
As per our requirement, we are going to create two angular components
AppComponent: The AppComponent is used to display the page header. This is our parent component.
StudentComponent: The StudentComponent is used to display the Student details. This is our child component. As this is the child component, it should be nested inside the AppComponent i.e. parent component.
The following diagram gives you a clear idea about the above two points.
Lets see how to achieve the above requirement step by step using nested components.
Step1: Creating student component
Open Visual Studio Code terminal and type ng g c student and press the enter button as shown in the below image.
Once you type the above command and press the enter button, then it will create a folder called student within the app folder with four files as shown in the below image.
Step2: Modifying Student.component.html file:
This file is going to contain the HTML for the student component. So, open the student.component.html file and then copy and paste the following HTML code in it. In the following code, we are using data binding expression (i.e. {{}}) to bind the data. In our upcoming Videos, we will discuss data binding in detail.
Step3: Modifying the student.component.ts file:
Within the student folder, you can find a file with the name student.component.ts within which the StudentComponent is created. So, open this file and then copy and paste the following code in it. This is going to be our child component. As said earlier, this component is going to display the student details, so here, we created five variables such as Name, Branch, Mobile, Gender and Age to store the student details as well as we also assigned these variables with some default values.
Step3: Modifying the App.Component.ts file
Now, open app.component.ts file and then copy and paste the following code in it. This file has the AppConponent and this is also the root component in the angular application and in our example it is also going to be our parent component. As said earlier, the parent component is going to display the header details.
As you can see in the above code, here we are using the inline template to display the page header as it contains only three lines of code. But if you want then you can also use an external template by using the templateUrl property of @Component decorator.
Running Angular Application:
In order to compile and run the angular application with your default browser, type ng serve -o and press the enter key as shown below.
Once you type the above command, it will compile and run your application using your default browser. If you observe the output, you are only getting the header, not the student details as shown in the below image.
This is because we have created the child component i.e. the StudentComponent but not yet used within the parent component i.e. within the AppComponent. So, in order to display the Student details, you need to nest the StudentComponent inside the AppComponent.
How to nest a component inside another component in angular?
In order to nest a component inside another component, you need to follow the below two steps.
Step1:
Open the “app.module.ts†file which is present inside the app folder, and then do the following things.
First, you need to import the StudentComponent and then you need to add the StudentComponent to the declarations array as shown in the below image.
Step2:
Open your parent component i.e. “app.component.ts†file and then include “app-student†as a directive as shown in the below image. If you remember, the “app-student†that we used here is nothing but a selector of StudentComponent i.e. our child component.
In order to style the table, please add the following styles in the styles.css file which is present inside the src folder.
With the above changes in place, now you should see the student details along with the header as expected as shown in the below image.
At this point, launch the browser developers tools and click on the “Elements†tab and notice <app-app> and <app-stduent> directives are rendered as HTML tag as shown in the below image. Here, you can see the app-student render inside the app-root tag.
