@Input - @Output

 

@Input : - Parent to child communication.

@Output :-  Child to parent 

Parant Component

--------------------------

parent-component.html

<app-parent-component (childInfo)="msg=$event" [fromParent]="parentMsg"></app-parent-component>

<h1 style="background-color: #f00; color: #fff;">{{msg}}</h1>

parent-component.ts

 public parentMsg = "This is parent Message";

  msg: any;

Child Component

------------------

child-component.html

<h1 style="background-color: blue; color: #ffffff; padding: 10px 20px; text-align: center;">

    {{parent}}

</h1>

<button (click)="fireEvent()">Tab-1</button>

child-component.ts

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

@Input('fromParent') public parent: any;

@Output() public childInfo = new EventEmitter();

fireEvent(){

    this.childInfo.emit("This is from Child");

}