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

Popular posts from this blog

html - How to set bootstrap input responsive width? -

javascript - Highchart x and y axes data from json -

javascript - Get js console.log as python variable in QWebView pyqt -