Angular ContentChild is always undefined using injection token

Question

I'm trying to implement a bridge pattern for content projection. In the component that has the ng-content tag in the HTML, I tried to get it via this line, where BUTTON_ENABLED_DIALOG is an InjectionToken:

@ContentChild(BUTTON_ENABLED_DIALOG, {static: true}) content?: IButtonEnabledDialog

The calling component does add BUTTON_ENABLED_DIALOG to the providers array.

That value is never getting set, even though I see the content. A tiny StackBlitz example can be found at https://stackblitz.com/edit/angular-ivy-pgnuny?file=src/app/app.component.ts

score 1 · Accepted Answer · answered Aug 18 '22 at 19:55

You have a wrong usage of @ContentChild decorator here. It can be used in the upper level of projected element to get access to the projected content, - within the AppComponent in your example.

For your purpose you can just use the Dependency Injection:

export class ButtonEnabledDialogComponent implements AfterViewInit {
  constructor(@Inject(BUTTON_ENABLED_DIALOG) private content: IButtonEnabledDialog
) {}

And get access to your injection token.

Angular ContentChild is always undefined using injection token

1 Answers1