Components Interaction In Angular: Input And Output Decorators

Create a new project

ng new componentInteraction

Create two components

ng generate component component-one
ng generate component component-two

Edit app.component.html to call the Parent Component component-one

<h1>Component Interaction</h1>

Calling component-one:
<app-component-one></app-component-one>

Component-One

ComponentOneComponent class defines two variables with initial values. The data in these variables will be used inside child-component using the input() keyword.

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

@Component({
  selector: 'app-component-one',
  templateUrl: './component-one.component.html',
  styleUrls: ['./component-one.component.scss']
})
export class ComponentOneComponent implements OnInit {
  //dataFromOne is a variable inside componentOneComponent
  dataFromOne='Hi, I am Data from the component-one';
  // dataFromOneWithAlias is a variable inside componentOneComponent
  dataFromOneWithAlias='Hi, I am Data from the component-one Explaining Alias';
  dataFromTwo:string;
  constructor() { }

  ngOnInit(): void {
  }
}

<h2>Inside component-one!</h2>
<p>Calling component-two from component-one</p>
<app-component-two (eventEmitterProperty)="dataFromTwo=$event" [FromOne]="dataFromOne" [dataFromOneWithAlias]="dataFromOneWithAlias"></app-component-two>
<h2>Again, Inside component-one!</h2>
<p>Reading data from component-two</p>
{{dataFromTwo}}

Check the <app-component-two> tag in above html. It means, component-one is calling the component-two. So here component-one becomes the parent and component-two becomes the child as component-one contains the component-two.

We will come back to (eventEmitter) later, skip/erase it for now.

The <app-component-two> tag contains FromOneand dataFromOneWithAliasstring directives. These directives are the variables defined into the component-two (child-component). These variables are getting the values defined in dataFromOne and dataFromOneWithAlias of component-one.

Component-Two

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

@Component({
  selector: 'app-component-two',
  templateUrl: './component-two.component.html',
  styleUrls: ['./component-two.component.scss']
})
export class ComponentTwoComponent implements OnInit {
  @Input() FromOne: string;
  @Input('dataFromOneWithAlias') dataFromOneExplainigAlias:string;
  @Output() public eventEmitterProperty=new EventEmitter();
  constructor() { }

  ngOnInit(): void {
    this.eventEmitterProperty.next('Hi, I am data from the component-two');
  }
}

With “@Input()” decorator, it tells the component-two that the value of the variable comes as input from it’s caller (parent) component.

We will come back to “@output” decorator later below. Skip/erase it for now.

<h2>Inside component-two!</h2>
Reading data from component-one:
<p>{{FromOne}}</p>
<p>{{dataFromOneExplainigAlias}}</p>

On component-two html when we print the input variables, it prints the values that we have defined in component-one.

The component-one component binds its dataFromOneWithAliasstring property to the child's component-twodataFromOneExplainingAlias alias.

Parent listens for child event: Output Decorator

The child component exposes an EventEmitter property with which it emits events when something happens. The parent binds to that event property and reacts to those events.

The child’seventEmitterProperty is an output property, typically adorned with an @Output() decorator as seen in this component-two.Component

The child’s component ngOnInit method triggers emission of a messageHi, I am data from the component-two, the string payload.

The parent ComponentOneComponent binds an event handler called eventEmitterProperty that responds to the child event payload $event and updates a dataFromTwo variable of component-one.