Pages

How to Pass data Between Angular components with @Input and @output decorators.

Input and Output decorators in Angular are used to exchange data between components. They are a mechanism to send or receive data from one component to another. Input is used to receive data in to the component whereas Output is used to send data out of the component. In this post we are going to see on how to send and receive data between components in Angular using Input & Output decorators.

Components:

First create two components in your angular project so that we can use them to transfer data.
for my convenience i have created two components with names as firstcomp and secondcomp. this will create two folders in src folder of your project.
After creating the above two components navigate to app.module.ts and modify it as given below so that it include the two components imports.


Now open app.component.ts in your src folder and modify it as follows.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FirstcompComponent } from './firstcomp/firstcomp.component';
import { SecondcompComponent } from './secondcomp/secondcomp.component';

@NgModule({
declarations: [
AppComponent,
FirstcompComponent,
SecondcompComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

as you can see i had included two methods buttonMessage and button1Message in the parent component. now copy and paste the below given html code to your app.html file.

<div> <h2>Data Transfer between first component to second component</h2> <div class="row"> <div class="col-6"> <app-firstcomp (emitEvent)="buttonMessage($event)"
[message]="messageFromButton1"></app-firstcomp> </div> <div class="col-6"> <app-secondcomp (emitEvent)="button1Message($event)"
[message]="messageFromButton"></app-secondcomp> </div> </div> </div>

The above html consists of 'app-firstcomp' tag and 'app-secondcomp' tag making them child components and app.component as parent component.
  • The (emitEvent) attribute in child tags fetches data emitted from  firstcomp/secondcomp component and sends it to the specified method we have given buttonMessage($event) method. here $event is the data we got from child component to parent component when it emits data.
  • The [message] attribute in child tags fetches data from  parent component (app.component) and sends it to the specified tags child component in this case firstcomp/secondcomp.
open firstcomp.html copy and paste below given code.

<div> <p>First component</p> <button (click)="clickMe()">Button</button> <h4>{{message}}</h4> </div>

now lets get to the functionality part. copy and paste the below given code to firstcomp.component.ts file.


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

clickMe(){ this.emitEvent.emit('message from first component'); } }

open secondcomp.html copy and paste below given code.


<div> <p>Second component</p> <button (click)="clickMe()">Button1</button> <h4>{{message}}</h4> </div>
now, copy and paste the below given code to second.comp.component.ts file.


import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-secondcomp', templateUrl: './secondcomp.component.html', styleUrls: ['./secondcomp.component.css'] }) export class SecondcompComponent implements OnInit { @Input() message:string; @Output() emitEvent = new EventEmitter(); constructor() { } ngOnInit() {}
clickMe(){ this.emitEvent.emit('message from second component'); } }


Explanation:

As you can see the two comonents tags will display their respective ui on the parent component. on the firstcomp and secondcomp we have buttons which when clicked calls 'clickMe()' method when executed the method using this.emitEvent.emit() emits a message in our case we are using a static string 'message from second component' . 
here in ts file you can see that message is declared with @Input  decorator and emitEvent with @Output decorator, so that when a message is emitted from other component the message variable will get the data and using emitEvent component one can emit data to other component.

that's it save and run your project when your click one of the buttons on the page the message will be displayed on other component. In our case  'message from second component'if  Button1 is clicked and 'message from first component' if Button is clicked 

vinay kumar

Founder of Gowriter.Blogspot.com, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: