Angular input output eventemitter parameter

 

Angular component interaction:

Components are playing the main role in angular application. Angular app means everything component. Every component is related to other components like parent, child, nested. In the real-time project, it would be necessary to pass the value from one component to another component.

What does @input decorator?

@input decorator behaves like API. Using this API we can communicate from parent to child component.

What does @output decorator?

@output decorator same behaving only difference is communication between child to parent component.

let's see practically how to use input, output parameters in our application.

How to use input parameter in angular?

parent.component.ts parentvar = 'This is Parent Variable';

parent.component.html <app-child [childvar]="parentvar"></app-child>

child.component.ts @Input() childvar: string;

child.component.html <p>Parent Value: {{childvar}}</p>

• Import appropriate module in child component Input.
• <app-child [childvar]="parentvar">  -  We have defined property binding [childvar] in child selector and assigned parentvar value. .
• @Input() childvar: string;  -  We have declared childvar variable as an input parameter type of string.

Refer above image also.The parentvar variable value assigned as a property binding [childvar] in child selector.Then childvar declared as a input parameter in child component. So that parent value displayed in child component.

 Find below the full code of the input parameter. 

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 {
   parentvar = 'This is Parent Variable';
  constructor() { }
  ngOnInit() {
  }
}
 

parent.component.html

 <app-child [childvar]="parentvar"></app-child> 

child.component.ts

 import { Component, OnInit, Input,Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
   @Input() childvar: string;
  constructor() { }
 
  ngOnInit() {
  }
 
 
}
 

child.component.html

<p>Parent Value: {{childvar}}</p>

How to use output(@output) parameter using eventemitter in angular?

parent.component.ts childtoparent:string; display(newItem: string) { this.childtoparent=newItem; }

parent.component.html <p>{{childtoparent}}</p> <app-child (parentEvent)="display($event)"></app-child>

child.component.ts @Output() parentEvent = new EventEmitter<string>(); assignItem(value: string) { this.parentEvent.emit(value); }

child.component.html <button (click)="assignItem('child to parent')"> child to parent</button>

• Import appropriate module in child component Output,EventEmitter.
• <app-child (parentEvent)="display($event)">  -  We have defined parentEvent in child selector.This eventemitter when fire the display funcion will be called in parenet.component.ts.
• @output() parentEvent=new EventEmitter<string>()  -  We have declared eventemitter as a output parameter type of string.

Have you seen the above images steps? When you click the child button assignItem function will call and emitting parentEvent property. This property defined as a eventbinding in parent component child selector.So that display function will be called and display the child value in parent component.

 Find below the full code of output parameter using EventEmitter. 

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 {
  childtoparent:string;
  constructor() { }
 
  ngOnInit() {
  }
  display(newItem: string) {
    this.childtoparent=newItem;
  }
}
 

parent.component.html

<p>{{childtoparent}}</p>
 <app-child (parentEvent)="display($event)"></app-child> 
 

child.component.ts

import { Component, OnInit, Input,Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() parentEvent = new EventEmitter<string>();
  constructor() { }
 
  ngOnInit() {
  }
 
  assignItem(value: string) {
    this.parentEvent.emit(value);
  }
 
}
 
 

child.component.html

 
<button (click)="assignItem('child to parent')">child to parent</button>