CODEWITHSUNDEEP
angulartypescripttypescript2.0
Amit Singh Kaira
Amit Singh Kaira

Reputation: 119

Pass function from Parent to Child component in Angular 2

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

Upvotes: 3

Views: 5079

Answers (2)

digit
digit

Reputation: 4565

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(); 
         }
    }
}

Upvotes: 4

Amit Singh Kaira
Amit Singh Kaira

Reputation: 119

Finally found the solution I used @ViewChildren in ParentComponent

  @ViewChildren('component') components: QueryList<MemberTemplateComponent>;

Child Component-

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

iterate the Component QueryList

 this.components.forEach(component => {
      component.callChildMethod();
    });

Now callChildMethod() of multiple child components is called from the parentComponent

Cheers...

Upvotes: 2

Related Questions