Instantiate a group of Angular Templates in AfterViewInit with Cdk Overlay

Question

I want to render a set of tabs on a Cdk Overlay.

The template should look like this:

<container>
  <tab-group>
    <tab>
      <!-- content 1 -->
    </tab>
    <tab>
      <!-- content 2 -->
    </tab>
    <tab>
      <!-- content 3 -->
    </tab>
  </tab-group>
</container>

So a tab is a template to render on the Cdk Overlay:

@Component({
    selector: 'mat-frontlayer',
    template: `<ng-template><ng-content></ng-content></ng-template>`
})
export class MatFrontlayer {
    @ViewChild(TemplateRef) templateRef!: TemplateRef<any>;
    @Input() name!: string;
    @Input() topPosition!: string;
}

And a tab-group is just a container:

@Component({
    selector: 'mat-frontlayer-group',
    template: `<ng-content></ng-content>`
})
export class MatFrontlayerGroup {
    @ContentChildren(MatFrontlayer, { descendants: true }) _allTabs!: QueryList<MatFrontlayer>;
    @Input() active: number = 0;
}

In my app-component I can inject the tab-group and push the template of every tab to a Cdk Overlay:

@ViewChild('frontlayerTabs', { read: MatFrontlayerGroup, static: true })
  _frontlayerGroup!: MatFrontlayerGroup;

ngAfterViewInit(): void {
    this._backdrop.openGroup(this._frontlayerGroup._allTabs.map(element => element.templateRef), 1);
}

_backdrop.openGroup() is the method that creates the Cdk Overlay. This works pretty fine.

Next, I want the container component to create the Overlay automatically. So I added:

@Component({
    selector: 'container',
    template: `<ng-content></ng-content>`,
})
export class Container implements AfterViewInit {

    @ContentChild(MatFrontlayerGroup) _frontlayerGroup!: MatFrontlayerGroup;

    constructor(
        private _backdrop: Backdrop
    ) { }

    ngAfterViewInit(): void {
        let _config: FrontLayerConfig = new FrontLayerConfig();
        let _frontLayerRefs = this._frontlayerGroup._allTabs.map(element => element.templateRef);
        this._backdrop.openGroup(_frontLayerRefs, this._frontlayerGroup.active, _config);
    }
}

But now I'm getting the following error:

The error occurs here:

@Component({
    selector: 'mat-frontlayer-group',
    template: `<ng-content></ng-content>`
})
export class MatFrontlayerGroup {
    @ContentChildren(MatFrontlayer, { descendants: true }) _allTabs!: QueryList<MatFrontlayer>; <-- Here the error occurs
    @Input() active: number = 0;
}

The usage of nested @ContentChild(ren) throws the error. What am I doing wrong?

Here is a link to the complete code: https://github.com/mifloma/ngx-mat-backdrop/tree/24-peer-navigation