I have a `my-button` component, which shall be wrapped in a `my-button-row` component, like this:

```
<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>

```

When I read the `my-button` components in `@ContentChildren`, i cannot find out which `(click)` handler is assigned to them.

```
export class MyButtonRowComponent {
    @ContentChildren(MyButtonComponent) buttons: QueryList<MyButtonComponent>;

    ngAfterContentInit() {
        // where is the (click) setting?
        console.log(this.buttons); 
     }
}

```

The result of the `console.log(this.buttons)` is a `QueryList` with `MyButtonComponents`, which do not have an assigned `click` event or something like this. How can is find out, which event handlers have been assign to the `ContentChildren`?

Why I want to do this:

I want to wrap my content children `my-button` components one by one with some styleable `div` wrapper. So going 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>

```

All solutions I've found to create dynamic components are not suitable because they do create new components, but the `(click)="func1($event)"` is lost during the process.