CODEWITHSUNDEEP
angularinheritancetypescriptangular2-template
AlvYuste
AlvYuste

Reputation: 945

Querying different components that inherit from the same one through @ContentChildren

I'm trying to querying a bunch of components that inherits from the same through ContentChildren:

<app-inputs-container>
   <app-input-1></app-input-1>
   <app-input-2></app-input-2>
   <app-input-3></app-input-3>
<app-inputs-container>

@Component({ selector: 'app-inputs-container', ... })
export class InputsContainerComponent implements AfterContentInit {
  @ContentChildren(BaseInputComponent) inputs;

  ngAfterContentInit() { console.log(this.inputs); }
}

All three inputs inherit from the same component:

@Component({ selector: 'app-input-1', ... })
export class Input1Component extends BaseInputComponent {    }

@Component({ selector: 'app-input-2', ... })
export class Input2Component extends BaseInputComponent {    }

@Component({ selector: 'app-input-3', ... })
export class Input3Component extends BaseInputComponent {    }

But I get the inputs list empty.

Is anything missing by my side, or this behaviour is not supported by Angular?

Upvotes: 1

Views: 198

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

You can do that by adding forwarding providers to your component

@Component({
  selector: 'app-inputs-container',
  providers: [
    {provide: BaseInputComponent, useExisting: Input1Component, multi: true}
    {provide: BaseInputComponent, useExisting: Input2Component, multi: true}
    {provide: BaseInputComponent, useExisting: Input3Component, multi: true}
  ]
})

Upvotes: 1

Related Questions