Nested Component Angular

A Component in Angular can have child components. Also, those child components can have their own further child components. Angular seamlessly supports nested components.In this post, we’ll see how to build components designed to be nested within other components and how to establish communication between the nested component and its parent.
Step 1: Create Parent and child Component

child.componet.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() title: string;
  constructor() { }

  ngOnInit() {

  }

}

Step2: Now in template child.componet.html

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  childTitle: string;
  constructor() { }

  ngOnInit() {
    this.childTitle = 'This is message from parent to child';
  }

}

parent.component.html

<div>
<h1>I'm a Parent component</h1>
</div>

child.component.chtml will be:

<h2>{{title}}</h2>

Let’s look at the code again, We’ll using Input property to get the values from the parent.If a nested components wants to receive input from its container, it must expose a property to that container. We use the Input Decorator to decorate any property in the nested components class. In here, we wanna the childTitle pass in the nested component.
Adding input to our import statement

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

If the nested component wants to send information back to its container, it can raise an event. The nested component exposes an event it can use to pass output to its container using the @Output decorator. In this case , the property type must be an event. The only way a nested component can pass data back to its container, is with an event. The data to pass is called the event payload.
So the modified chid.component.ts would be:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() notify: EventEmitter = new EventEmitter();
@Input() title: string;
  constructor() { }

  ngOnInit() {

  }
  onClick() {
    this.notify.emit('Click from nested child that subsribe in parent ');
  }
}

You can see I have imported Event Emitter from angularcore
child.component.html

parent.component.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  childTitle: string;
  constructor() { }

  ngOnInit() {
    this.childTitle = 'This is message from parent to child';
  }

  onNotify(message: string): void {
    alert(message);
  }
}

parent.component.html


<div>
  <h1>I'm a Parent component</h1>

</div>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s