Nested Component In Angular

Introduction

 

In this article, we are going to create nested components and share data between them.

 

Highlights

• Creating a nested component
• Loading nested component in a container component 
• Sharing data between container/Parent component to child component and vice-versa 

Problem Statement

 

Loading ArticlelistComponent in the root component when a user clicks on the View articles list button as shown below:

Demosteps

 

Create a component called articlelist using the following command,

 

ng generate component articlelist

 

Above command will create a folder with name articlelist with the following files,

• articlelist.component.ts 
• articlelist.component.html
• articlelist.component.css
• articlelist.component.spec.ts

ArticleListComponent class will be added in app.module.ts file

 

Write the below-given code in articlelist.component.ts

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

@Component({
  selector: 'app-articlelist',
  templateUrl: './articlelist.component.html',
  styleUrls: ['./articlelist.component.css']
})
export class ArticlelistComponent implements OnInit {
  articles = [
    { articleId: 1, articleName: 'Getting started with Angular' },
    { articleId: 2, articleName: 'Templates in Angular' },
    { articleId: 3, articleName: 'Builtin Pipes in Angular' },

  ];
  constructor() { }

  ngOnInit(): void {
  }
}

Write the below-given code in articlelist.component.html 

<table border="1">
    <thead>
      <tr>
        <th>article ID</th>
        <th>article Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let article of articles">
        <td>{{article.articleId}}</td>
        <td>{{article.articleName}}</td>
      </tr>
    </tbody>
  </table>

Add the following code in articlelist.component.css 

tr{
    text-align:center;
}

Write the below-given code in app.component.html

<router-outlet>
  <h2> Popular articles </h2>
  <button (click)="show=true">View article list</button><br/><br/>
  <div *ngIf="show">
      <app-articlelist></app-articlelist>
  </div>
</router-outlet>

Write the below-given code in app.component.ts

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

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  show:boolean;
}

Save the files and check the output in the browser.

 

Now we are going to see how to pass data from container/Parent component to child component.

 

To achieve this we can use @Input decorator in the child component on any property type like arrays, objects, etc. 

 

Problem Statement

 

Let us create an AppComponent which displays a dropdown with a list of articles as values in it. Create another component called articleist component and load it in AppComponent which should display the article details. When a user selects a article from the dropdown, the corresponding article details should be loaded:

 

After selecting the particular article its details should be visible as below,

 

Now let's start the implementation,

 

Open article list.component.ts file used in the previous example and add input setter method for property cName in the component as shown below in Line 18:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-articlelist',
  templateUrl: './articlelist.component.html',
  styleUrls: ['./articlelist.component.css']
})
export class ArticlelistComponent implements OnInit {
  articles = [
    { articleId: 1, articleName: 'Getting started with Angular' },
    { articleId: 2, articleName: 'Templates in Angular' },
    { articleId: 3, articleName: 'Builtin Pipes in Angular' },

  ];

  article: any[];
  @Input() set cName(name: string) {
    this.article = [];
    for (let i = 0; i < this.articles.length; i++) {
      if (this.articles[i].articleName === name) {
        this.article.push(this.articles[i]);
      }
    }
  }
  constructor() { }

  ngOnInit(): void {
  }

}

Open article list.component.html and add the following code 

<table border="1">
    <thead>
      <tr>
        <th>article ID</th>
        <th>article Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let c of article">
        <td>{{c.articleId}}</td>
        <td>{{c.articleName}}</td>
      </tr>
    </tbody>
  </table>

Add the following in app.component.html

<router-outlet>
   <h2> Popular articles </h2>
Select a article to view <select #article (change)="name = article.value">
    <option value="Getting started with Angular">Getting started with Angular</option>
    <option value="Templates in Angular">Templates in Angular</option>
    <option value="Builtin Pipes in Angular">Builtin Pipes in Angular</option>
    </select><br/><br/>
    <app-articlelist [cName]="name"></app-articlelist>>
</router-outlet>

Add the following in app.component.ts

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

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

  name:string;
}

Now observe the output on the browser.

 

Now we are going to see how to pass data from child component to container/parent component,

 

To achieve this, if a child component wants to send data to its parent component, then it must create a property with @Output decorator. 

 

The only method for the child component to pass data to its parent component is through events. The property must be of type EventEmitter 

 

Problem Statement

 

Let us create an AppComponent which loads another component called articlelist component. Create another component called articleistComponent which should display the articles list in a table along with a register button in each row. When a user clicks on the register button, it should send that articleName value back to AppComponent where it should display registration successful message along with articleName.

 

Demosteps

 

Open articlelist.component.ts file created in the previous example and add the following code

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-articlelist',
  templateUrl: './articlelist.component.html',
  styleUrls: ['./articlelist.component.css']
})
export class ArticlelistComponent  {
  @Output() OnRegister = new EventEmitter<string>();
  articles = [
    { articleId: 1, articleName: 'Getting started with Angular' },
    { articleId: 2, articleName: 'Templates in Angular' },
    { articleId: 3, articleName: 'Builtin Pipes in Angular' },

  ];
  register(articleName: string) {
    this.OnRegister.emit(articleName);
  }
}

Open articlelist.component.html and add the following code

<table border="1">
    <thead>
      <tr>
        <th>article ID</th>
        <th>article Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let article of articles">
        <td>{{article.articleId}}</td>
        <td>{{article.articleName}}</td>
        <td><button (click)="register(article.articleName)">Register</button></td>
      </tr>
    </tbody>
  </table>

Add the following in app.component.html

<router-outlet>
<h2> Popular articles</h2>
<app-articlelist (OnRegister)="articleReg($event)"></app-articlelist>
<br/><br/>
<div *ngIf="message">{{message}}</div>
</router-outlet>

Add the following code in app.component.ts 

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

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

  message: string;
  articleReg(articleName: string) {
    this.message = `Your registration for ${articleName} is successful`;
  }
}

Now observe the output screen-

After clicking on Register button, you will view the below output screen on your browser,

 

Summary

 

In this article, we explored the nested component details and the concept of passing data from container/parent component to child component and vice-versa with examples.

 

Hope you like the article. Until next time - Happy Reading Cheers