Angular Nested Components

Angular Nested Components with Example

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. 

Angular Nested Components with Example

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.

What are Angular Nested Components?

Let’s 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.

Understanding Nested Components in Angular Application.

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.

How to nest a component inside another component in angular?

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 articles, we will discuss data binding in detail.

<table>
    <tr>
        <td>Name</td>
        <td>{{Name}}</td>
    </tr>
    <tr>
        <td>Branch</td>
        <td>{{Branch}}</td>
    </tr>
    <tr>
        <td>Mobile</td>
        <td>{{Mobile}}</td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>{{Gender}}</td>
    </tr>
    <tr>
        <td>Age</td>
        <td>{{Age}}</td>
    </tr>
</table>
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.

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

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

    Name: string = 'Anurag';
    Branch: string = 'CSE';
    Mobile: number = 9876543210;
    Gender: string = 'Male';
    Age: number = 22;

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
    template: `<div>
                    <h1>{{pageHeader}}</h1>                  
               </div>`
})
export class AppComponent {
    pageHeader: string = 'Student 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.

Running Angular Application using Angular CLI command

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.

Nested Component Example in Angular Application

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.

What is Nested Component in Angular?

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.

Understanding Angular Nested Components.

In order to style the table, please add the following styles in the styles.css file which is present inside the src folder.

table {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size:large;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}

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.

How to pass data from child component to parent component in angular?

At this point, launch the browser developer’s 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.

How to pass data from child component to parent component in angular appliaction?

In the next article, I am going to discuss How to Styling the Angular Components in Detail. Here, in this article, I try to explain how to Angular Nested Components. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.

1 thought on “Angular Nested Components”

Leave a Reply

Your email address will not be published. Required fields are marked *