Get direct access to ng-content input

🚀 Feature request

Make content that comes in via ng-content more easily accessible.


I would like to be able to give content to a component like this:

<app-content>{{ content }}</app-content>

And then get direct access to the content inside my component, e.g. via an injection or a special template variable.

I have a more detailed description of how this should work here: Render string input of ng-content directly as HTML (StackOverflow)

This also includes a StackBlitz of how I would like to avoid to do it (see get-input-of-ng-content-directly).

Describe the solution you’d like

I would like to use it in the template directly, something like this:

<div [outerHTML]="incoming ng-content stuff"></div>

Or inject it like this:

constructor(ngContentStuff: NgContent)

Describe alternatives you’ve considered

In the StackBlitz example I am getting the content via ng-content in the template and than access it via elementRef.nativeElement.textContent.

1 possible answer(s) on “Get direct access to ng-content input

  1. I think I would consider this a duplicate of #8563, which is our overarching issue for giving more granular control of content projection. Does that sounds reasonable?