Pass function from Parent to Child component in Angular 2

Question

I have a Array (mMemberCount) in Parent Component and based on the size of this array the child component (Reusable) is attached to Parent component.

<member-template *ngFor="let item of mMemberCount" [title]="item.relation" [memberid]="item.id" (update)="update($event)">
</member-template>

<div class="btn_container">
  <button class="button orange" type="submit">Submit</button>
</div>

The child component is as follows

  @Component({
      selector: 'member-template',
      templateUrl: './member-template.component.html',
      styleUrls: ['./member-template.component.scss'],
      providers: [],
    })

    export class MemberTemplateComponent implements OnInit {

      TAG: string = " MEMBER-TEMPLATE: ";
      // Input variables wil be taken from the calling
      @Input('title') title: string;
      @Input('memberid') memberId: number;

      @Output('update')
      datasubmit: EventEmitter<string> = new EventEmitter<string>();


      sendDataToParent(){
         let output = "Tetsing Eventemitter";
         this.datasubmit.emit(output);
      } 
    }

The @output('update') is working fine. I want to call this sendDataToParent() of ChildComponent (MemberTemplateComponent) from ParentComponent. I mean when the user tap the button submit of the parent component this sendDataToParent should call

Do you wan't to call sendDataToParent in each repeated member-template component when the user tap the submit button? — Faly

digit digit · Accepted Answer · 2017-03-14T11:13:56

UPDATED 11/15/17

You can achieve this by using @ViewChild

ParentComponent

import { AfterViewInit, ViewChild } from '@angular/core';
import { Component }                from '@angular/core';
import { MemberTemplateComponent }  from './member.template.component';

@Component({
      selector: 'parent-template',
      templateUrl: './parent-template.component.html',
      styleUrls: ['./parent-template.component.scss'],
      providers: []
})

export class ParentTemplateComponent implements OnInit {
    @ViewChild(MemberTemplateComponent) private childComponent: MemberTemplateComponent;
    ngAfterViewInit() {
         submit() {
              this.childComponent.sendDataToParent(); 
         }
    }
}

Pass function from Parent to Child component in Angular 2

2 Answers