Angular2 Nested Components

Angular2 Nested Components

In this article, I am going to discuss another important concept i.e. Angular2 Nested Components. Here in this article, first we will discuss how to create an angular 2 nested component using the angular framework and then we will see how to pass the data from parent component to the child component. Please read the following two articles before proceeding to this article.

Angular 2 Components in Details.

Template vs Template URL in Angular 2 applications.

The components are the basic building blocks of an angular 2 application. A component in angular 2 is a piece of code with a particular view template with its own data and logic.

The point that you need to keep the focus here is, keeping all the features in one component is not a great idea because when the application grows it will be very difficult 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 nested components in Angular?

The Angular2 framework allows us to use an angular component within another angular component and when we do so then it is called as Angular2 Nested Components. The outside component is called the parent component and the inner component is called the child component. 

Let us discuss, how to create and use a nested component in the angular2 application. Assume, you have a component called Student Component and you want to use this Student Component inside AppComponent which is going to be our root component. 

Our requirement is that we need to displays the student details as shown in the below image. 

Angular2 Nested Components

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.

StudentComponentThe StudentComponent is used to display the Student details. This is also our child component. As this is the child component, it should be nested inside the AppComponent i.e. parent component in our example.

The following diagram gives you a clear idea about the above two points.

Angular2 Nested Components

Let’s see how to achieve the above requirement step by step using nested components.

Step1: Create a folder with the name Student

To do so, right click on the “App” folder in solution explorer and then add a new folder with the name “Student“. Here, in this folder, we are going to create our custom StudentComponent.html file and Student.Component.ts file.

Step2: Creating the StudentComponent.html fule

Right click on the “Student” folder and then add an HTML file with the name StudentComponent.html and then copy and paste the below code in it. This is the required HTML to render the Student Details on the page.

<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: Creating StudentComponent

Right click on the “Student” folder and then add a TypeScript file with the Name Student.Component.ts and then copy and paste the following code in it. This is going to be our child component. In this component, we are going to define the logic which will display the Student Details.

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

@Component({
    selector: 'my-student',
    templateUrl: 'app/Student/StudentComponent.html'
})

export class StudentComponent {
    Name: string = 'Pranaya';
    Branch: string = 'CSE';
    Mobile: number = 9876543210;
    Gender: string = 'Male';
    Age: number = 20;
}

Step4: Modifying the App.Component.ts file. 

In our example, the AppConponent is going to be used as our parent component. So this component is going to display the header details. So, you need to modify the “app.component.ts” file as shown below which present is inside the app folder of your project.

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

@Component({
    selector: 'my-app',
    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. 

Now, save the changes and run the application by pressing F5 key or CTRL+F5, then you will only see the page header, but not the student details as shown in the below image.

Angular2 Nested Components

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. To do so, please follow the below 2 steps.

Step1: 

Open the “app.module.ts” file which is present inside the app folder, and then do the following things.

  1. First, you need to import the StudentComponent 
  2. Then you need to add the StudentComponent to the declarations array as shown in the below image

Angular2 Nested Components

Step2: 

Open your parent component i.e. “app.component.ts” file and then include “my-student” as a directive as shown in the below image. If you remember, “my-student” that we used here as a directive is nothing but a selector of StudentComponent i.e. our child component.

Angular2 Nested Components

To style the table, including 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;
}

Now save the changes and run the application and you will see the student details along with page header as expected. At this point, launch the browser developer’s tools and click on the “Elements” tab and notice <my-app> and <my-stduent> directives are the rendered HTML as shown in the below image.

Angular2 Nested Components

What is AppModule?

In the above example, in step1 we use something called AppModule. So let us discuss what exactly this AppModule is in details. We use the below AppModule in this example.

Angular2 Nested Components

The AppModule is nothing but the root module which tells the angular framework on how to construct and bootstrap the application.

The angular module class in an angular 2 application describes how the different parts of the application fit together. Every angular 2 application must have at least one Angular module which is the root module that bootstrap to launch the application. You can give any name to this root module but by conventional the name is AppModule

The import statement in angular2 is used to import the functionality from the existing modules. As you can see in the above image, we have two modules i.e. the BrowserModule and NgModule

BrowserModule: This is one system module provided by angular core library. The angular2 application which you want to run on a web browser needs this module.

NgModule: This is also one system module and this module is used to add metadata to angular module class.

The most important point that you need to remember is when you decorate a class with NgModule decorator then only that class behaves like an angular module.

Properties of the @NgModule decorator

imports: It Imports the BrowserModule that is necessary and required if you want to run your angular 2 application in a browser

Declarations: You need to register all the components within this Declarations array. In our example, we have two components – AppComponent and StudentComponent

Bootstrap: This is used to tell the Angular framework which components need to be loaded so that its functionality can be accessed in the application. In our example, it contains the root component i.e. the AppComponent that Angular creates and then inserts into the index.html page which is our host web.

In a later article, we will discuss the angular modules in details. In the next article, we are going to discuss Styling the Angular Components.

SUMMARY:

In this article, I try to explain how to Angular2 Nested Components. 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.

Leave a Reply

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