I am dealing with a my-button component that needs to be enclosed within a my-button-row component in the following manner:
<my-button-row>
<my-button [label]="Some Label" (click)="func1($event)"></my-button>
<my-button [label]="Some Other Label" (click)="func2($event)"></my-button>
</my-button-row>
However, when I try to access the (click) event handlers assigned to the my-button components using @ContentChildren, I run into an issue.
export class MyButtonRowComponent {
@ContentChildren(MyButtonComponent) buttons: QueryList<MyButtonComponent>;
ngAfterContentInit() {
// unable to determine the (click) setting
console.log(this.buttons);
}
}
The output of console.log(this.buttons) is a QueryList containing MyButtonComponents without any associated click events. How can I identify which event handlers have been set for the ContentChildren?
My intention is to individually wrap each my-button child component with a stylable div. Transforming from:
<my-button-row>
<my-button [label]="Some Label" (click)="func1($event)"></my-button>
<my-button [label]="Some Other Label" (click)="func2($event)"></my-button>
</my-button-row>
to this:
<my-button-row>
<div class="styleme">
<my-button [label]="Some Label" (click)="func1($event)"></my-button>
</div>
<div class="styleme">
<my-button [label]="Some Other Label" (click)="func2($event)"></my-button>
</div>
</my-button-row>
Existing solutions for generating dynamic components are not appropriate as they create new components which lead to the loss of (click)="func1($event)".