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