Communication Between Components Using @Input() and @Output in Angular Framework

In Angular Framework, Components can communicate with each other. Sharing the data with another component by passing data or events is known as the communication of components. There are three types of component. First is the child component this component is used inside or defined inside another component is knows as the child component. Second is the parent component this is the enclosing component. It is the outer component in which child component is defined. The third is a sibling component. The two-component not related to each other is called as siblings component.
in this article, we will see and learn the Communication Between Components Using @Input() and @Output in Angular Framework.
The communication between the components can be done in various ways:

  1. Communication using @Input()
  2. Communication using @Output()
  3. Communication using Services class
  4. Communication by parent component calling ViewChild

in this article, we will be a focus on the communication between the component using @Input() and @output() property.

Communication with a parent to child component using input property
In Angular based application, communication with a parent to child component is always required. So to pass data from the parent component to the child component, we can use @input() property.

Firstly Let’s create Two-component and see how the communication is done with @Input() property. For this I have created two-component AppComponent it will the parent component and AppChildComponent this will be Child component.

app-child.component.ts

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

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

displayMessage:string = “I am a child component”;

  constructor() { }

  ngOnInit() {
  }

}

app-child.component.html

<h2>Hello {{displayMessage}}</h2>

app.component.ts

import { Component } from '@angular/core';
import { AppChildComponent} from ‘./appChild.component’;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
message:string=”I am a Parent Component;
}

app.component.html

<h1> Hello User {{message}}</h1> <br/>
<app-app-child></app-app-child>

Till now, AppComponent(parent) and AppChildComponent(Child) component has been created. Now let’s implement and use @input() property to pass data from parent component to child component.

app-child.component.ts

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

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

// displayMessage:string = “I am a child component”;

  constructor() { }

  ngOnInit() {
  }

}

app-child.component.html

<h2>Hello {{displayMessage}}</h2>

As you can see here in an app-child.component.ts file displayMessage property is modified with @Input() decorator. So that the value of displayMessage property can be set from the AppComponent (parent) component.
Next step will modify the parent component. So that data can be passed to the child component.

app.component.ts

import { Component } from '@angular/core';
import { AppChildComponent } from '../app-child/app-child.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message:string="I am a Parent Component";
  childMessage :string= "This message is passed from parent component to the child component";
}

app.component.html

<h1> Hello User {{message}}</h1> <br/>
<app-app-child [displayMessage]=”childMessage”></app-app-child>

Here, we can see we are passing the displayMessage property of the parent component to a child component by putting in the square bracket. So the value of the childMessage will store to displayMessage and will get passed to the child component. @Input() displayMessage property will receive this message. Now we can see data is passed to child component from the parent component.

Communication with a child to parent component using output property
In Angular based application, Data transfer from the child to parent component is always required. So to pass data from the child component to the parent component, we can use @Output() property.
An Output is an observable property annotated with an @Output decorator, the property always returns an Angular EventEmitter. Values flow out of the component as events bound with an event binding.
In Angular, a component can emit an event using @Output an EventEmitter. Both are parts of the @angular/core.

Firstly Let’s create two-component and see how the communication is done with @Output() property. For this I have created two components AppComponent it will the parent component and AppChildComponent this will be Child component.

app-child.component.ts

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

@Component({
  selector: 'app-app-child',
  templateUrl: './app-child.component.html',
  styleUrls: ['./app-child.component.css']
})
export class AppChildComponent implements OnInit {
  @Output() changeValue = new EventEmitter();
    value = 0;
    changeData() { 
        // You can give any function name
        this.value = this.value + 10;
        this.changeValue.emit(this.value);
    }

  ngOnInit() {
  }

}

app-child.component.html

<button class='btn btn-primary' (click)="changeData()">Click me</button>

app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
   ngOnInit() {
    }
    displayData(value) {
        console.log(value);
    }
}

app.component.html

<app-app-child (changeData)='displayData($event)'></app-app-child>

Here we have passed the data from child to parent component using @Output() binding.

In this article, we have explored the communication Between Components Using @Input() and @Output in Angular Framework. Happy Learning!