webbuild infotech

@Input, @Output and EventEmitter in Angular

Concept of @Input, @Output, and EventEmitter in Angular

Hey Friend, If you are new to Angular and want to learn about @Input, @Output, and EventEmitter then you are on the right blog, and in this blog, we are going to discuss all the concepts related to those Angular Decorators in detail. It’s a bit difficult at the beginning time but no worry at all. I will try to explain in an easy way with an example so it would be good to understand.

So without wasting the time let’s go ahead.

Exchange the data between components

In Angular, we can create many components and say it’s a Component-based architecture. so how can you change the data of a component when using another one?

First, let’s give some explanation about those decorators. We have the @Input decorator. So it declares the variable in the Childe component with @Input and passes the value from another component or say from the parent component with that Variable name like [childVariable]=”paretVariable“.

Let’s start with the examples.

@Input

Suppose we have two components first is ‘parentComponent’ and another component named is ‘childComponent’. so we will pass the value from the parent component to the child component.

parent.component.ts

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

export class ParentComponent implements OnInit {
    parentVariable = 'This is Parent Class';
    constructor(){}
    ngOnInit() {}
}

so in the above example, we created the .ts file and now we are going to implement Html so in the HTML file we will add the child component inside of HTML and pass the variable value as an attribute.
parent.component.html

<div>
     <app-child [childVariable]="paretVariable"></app-child>
</div>

We have implemented the parent component with HTML and created the parentVariable and used in HTML            like  [childVariable]=”paretVariable

And now let’s create the child component.

child.component.ts

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

export class ChildComponent implements OnInit {
   @Input childVariable;
   constructor(){}
   ngOnInit() {
       console.log('childVariable',this.childVariable);
   }
}

@Output & EventEmitter

So in @Output is the opposite of @Input, we can pass the data from the child to the parent component.

child.component.ts

import {Component,OnInit,input,ViewChild,EventEmitter} from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})

export class ChildComponent implements OnInit {
 @Output childVariable = new EventEmitter<string>();
  constructor(){}
  ngOnInit() {}
  onSend(){
    this.childVariable.next('Send Message to parent');
  }
}

child.component.html

<div> <button (click)="onSend()"></button> </div>

now let’s create the parent component and use the function and then get the value in the parent component.

parent.component.ts

import { Component, OnInit, ViewChild} from '@angular/core'; 
@Component({  
selector: 'app-parent',  
templateUrl: './parent.component.html',  
styleUrls: ['./parent.component.scss'] 
}) 
export class ParentComponent implements OnInit { 
   parentVariable = 'This is Parent Class'; 
   constructor(){} 

   ngOnInit() {} 
   onReceive(e){
      console.log('e',e);
   }
}

parent.component.html

<div>
     <app-child (childVariable)="onReceive($event)"></app-child>
</div>

So in the parent component, we have created the onReceive function and when clicking the button from the child component then the value will be received in the parent component.

Leave a Comment

Your email address will not be published. Required fields are marked *