dynamically bind and call parent component method from child component in angular

I am getting error on tabMethod is not function child component

In the Parent component:

In the .ts file:

this.pillTabs = [
{ tabName: 'Subscribers', tabMethod: this.showSubscribers.bind(this) },
{ tabName: 'Exemplars', tabMethod: this.showExemplars.bind(this) }
];


In the .html file:

<pill-tabs [pillTabs]="pillTabs"></pill-tabs>


In the Child component:

In the .ts file:

@Input() pillTabs: any;


In the .html file:

<div *ngFor="let pillTab of pillTabs; let i = index">
<input type="radio" id="{{'radio-' + i}}" name="tabs" [checked]="pillTab.checked"
(click)="pillTab.tabMethod()" />
<label class="tab" for="{{'radio-' + i}}">{{pillTab.tabName}}</label>
</div>

Continue reading...