An Array named mMemberCount is present in the Parent Component. Depending on the size of this array, a child component (which is Reusable) gets attached to the 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 structure of 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 are received from the parent
@Input('title') title: string;
@Input('memberid') memberId: number;
@Output('update')
datasubmit: EventEmitter<string> = new EventEmitter<string>();
sendDataToParent(){
let output = "Testing Eventemitter";
this.datasubmit.emit(output);
}
}
The @output('update') function is functioning properly. My aim is to trigger the sendDataToParent() method of ChildComponent (MemberTemplateComponent) from the ParentComponent. In simple terms, when the user clicks the submit button in the parent component, the sendDataToParent should be executed.