10.Component Interaction

Component Interaction

 

app.components.html

<h1>Parent Component : {{msgFromChild}}</h1>

<app-test (childMsg)="msgFromChild=$event" [parentMsg]="msgFromParent"></app-test>

app.components.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'myOne';

public msgFromChild ="";

public msgFromParent = "Message from Parent";

}

test.components.ts

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

@Component({

selector: 'app-test',

template: `

<h1>Child Component - {{parentMsg}}</h1>

<button (click)="msgPassToParent()">Click</button>

`,

styles: []

})

export class TestComponent implements OnInit {

constructor() { }

ngOnInit() {}

@Input('parentMsg') public parentMsg;

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

msgPassToParent(){

this.childMsg.emit("Message from Child");

}

}

.................................................................................