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
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();
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With