How to use @Input And @Output Decorator In Angular

January 1, 2023January 1, 2023 M-SoftTech 0 Comments

Hello, viewer welcome to M-Softech. In Today article I will teach you how to share data between two component help of input and output decorator. it is very important part of angular. basically I tell you how to share data between parent component to child component help of Input decorator. and how to share data between child component to parent component help of output decorator.

I have make a component that’s name is child you can see on code. and the parent component is app component bydefault. I will share data between child component to app component in the help of input out decorator.

On Child component 

Go to the HTML page, use event binding and call a function to set the value.

Go to the component page which means .ts and declare a property with @Output(), like @Output () variable name=new EventEmitter(); And emit data using this variable like this.variablename.emit(passing-data) On Parent component

Go to the HTML page, use the same variable name as defined in the child component with @Output( ), as an event binding

Go to the component page and inside the method set the value and use it in the parent HTML.

What is Event Emitter?

As components is used in Angular and there are many events that we are using so, component emits the event using @output and event emitter. When we pass the value from child to parent component, parent can emit the value anytime using event emitter. Basically, directives are used to extend the power of HTML attributes and to model and reshape the DOM structures.

app.component.html (It is a parent component)

<h1>Example @Input() and @Output() Decorators in Angular 13</h1>
<app-child [inputexample]="sendinpudata" (outputexample)="recivedata($event)"></app-child>
<h2>{{recivechildata}}</h2>

app.component.ts (It is a parent component)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'inputoutput';
  sendinpudata="This data transfer to parent component to child component";
  recivechildata:any;

  recivedata(val:any){
    //console.log(val);
    this.recivechildata = val;
  }
 

}

child.component.html(It is child Component)

<p>child works!</p>
<h2>{{childdata}}</h2>
<button (click)="sendata();">Send data from child to parent component</button>

child.component.ts(It is child Component)

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

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


export class ChildComponent {
  public childdata:any;
  public childtoparent="This data transder from child component to parent component";
@Input() inputexample:any |undefined;
@Output() outputexample:EventEmitter<any> = new EventEmitter();


ngOnInit(){
  //console.log(this.inputexample);
  this.childdata = this.inputexample;
}
sendata(){
  this.outputexample.emit(this.childtoparent);
}



}

If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts.

if you have any confusion Comment below or you can contact us by filling out our contact us.

YOU MIGHT ALSO LIKE

How To Use Component Lifecycle Hooks In Angular

Lazy Loading in Angular in Hindi | Angular Modules | Types of Modules loading

If you have any problem to understand this code you can watch also video tutorial