Component communication in Angular

Introduction

Components are the most basic UI building block of an Angular app, which form a tree of Angular components.In order to make them work together, we need communication between components.In general, there are 3 different methods for component communication. Lets first see how to create a Angular component.An angular component is created by using ng generate command.

Step 1 : Open the terminal and navigate to the directory of your angular application.

Step 2 : Run the below command and hit enter.

Syntax :

ng generate componenng generate component <component-name>t <component-name>

And the component will be created.

ng generate component component-one

3 ways of components communication

1. Parent to Child – Sharing data via Input
2. Child to Parent – Sharing data via Output and EventEmitter
3. Child to Parent – Sharing data via Viewchild and AfterViewInit

1. Parent to Child – Sharing data via Input

To share data from parent component to child component , we use @Input decorator.

Lets see programatically. First create 2 components named parent-component and child-component.

In the parent component, instantiate the child component and pass the value to the child component using the concept of property binding as below.

<child-component [childinput]=value></child-component>

The child component will receive the data passed from parent component by @Input() decorator and the variable childinput contains the data that is passed from parent component. The child-component.ts looks like

export class ChildComponent {
    @Input() childinput: any;
}

2. Child to Parent – Sharing data via Output and EventEmitter

This is one of the method is used to share the data between child component to parent component. This method is used when we want to share the data on some occurence of user events like button click, form submission etc..,

The data passing is acheived by the following steps.

1.  In the child component, we use @output decorator to send the data to the parent by creating an event with the help of an EventEmitter. The function sendMessage() is called on some user events and emits data to parent.

export class ChildComponent {
    @Output() childoutput = new EventEmitter<string>();
    constructor() { }
    sendMessageToParent() {
        this.childoutput.emit("Hi!!")
    }
}

2. The parent component can now subscribe to this childoutput event that is emitted by the child component. And when the child component emits the data , the receiveChildMessage() function in parent component is called.

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

@Component({
  selector: 'app-parent',
  template: `
    <child-component (childoutput)="receiveChildMessage($event)"></child-component>
  `,
  styleUrls: ['./parent.component.css']
})

export class ParentComponent {    
    constructor() { }    
    childoutput:string;
    receiveChildMessage($event) {  
        this.childoutput = $event  
    }
}

3. Child to Parent – Sharing data via Viewchild and AfterViewInit

In this method, the child component is injected into the parent component using ViewChild. By doing so, the parent component have access to attributes and functions of child component.

An access to the child component will not be available until the child component has been initialized. This means that we need to implement ngAfterViewInit() lifecycle hook in parent component to receive the data from the child component.The ngAfterViewInit lifecycle hook is called after the initialization of child component.

@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child;
  constructor() { }
  childmessage:string;
  ngAfterViewInit() {
    this.childmessage = this.child.message;
  }

export class ChildComponent {
  message = 'Message from Child';
  constructor() { }
}

Conclusion

And now, we discussed about how data is shared between parent component to child component and vice versa.These are the 3 main methods to share data among components.