Angular 2 how to emit methode in component child to component parent -
i try erase input field child component, transferred @ouput information activate method delete() in parent component!
thank in advance
you can acomplish using eventemitter
, @output
:
in following snippet, can call passdatatoparent()
function pass desired data.
child.component.ts
import { component, oninit, output, eventemitter } '@angular/core'; @component({ selector: 'app-child-component', templateurl: './child.component.html', styleurls: ['./child.component.css'] }) export class childcomponent implements oninit { // ******** important part ****** @output() emitter: eventemitter<any[]> = new eventemitter(); datatoemit : = "data pass parent component"; constructor() {} ngoninit() { } //call function pass data passdatatoparent() { this.emitter.emit(this.datatoemit); } }
parent.component.ts
import { component, oninit, viewchild } '@angular/core'; import { childcomponent } './child-component'; @component({ selector: 'app-parent-component', templateurl: './parent.component.html', styleurls: ['./parent.component.css'] }) export class parentcomponent implements oninit { // ******** reference of child component ****** @viewchild(childcomponent ) child : childcomponent ; constructor() {} ngoninit() { } receivedatafromchild(data) { console.log(data); } }
finally in parent html
parent.component.html
<app-child (emitter)="receivedatafromchild($event)"></app-child >
hope helps!
Comments
Post a Comment