Loading

Angular

What is Angular Nested Components?. The Complete Angular Developer Course 2022 [Videos].

In this Video, I am going to discuss the Angular Nested Components with Examples. Please watch our previous Video where we discussed Template vs TemplateURL in Angular Application. Here in this Video, 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?

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.

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 Videos, 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>
<h2>{{pageHeader}}</h2>
</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 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.

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

See All

Comments (393 Comments)

Submit Your Comment

See All Posts

Related Posts

Angular / Blog

What is Angular?

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.
7-Feb-2022 /35 /393

Angular / Blog

What is Angular 2 (or any higher version) Framework?

In this article, I am going to give a brief introduction to Angular Framework. At the end of this article, you will understand the following pointers in detail.
7-Feb-2022 /35 /393

Angular / Blog

What is Angular Versions and Versioning in Detail?

In this article, I am going to discuss Angular Versions and Versioning in detail. Please read our previous article where we gave a brief introduction to the angular framework. At the end of this article, you will understand the different angular versions and in each version what are the new features introduced as well as what improves. Till now Google has released 7 versions of angular, they are as follows:
7-Feb-2022 /35 /393