The ng-content select property works like a CSS selector to help Angular find the right place for projected content in the DOM.
Ng-content is a Component factory that dynamically generates components according to the configured information specified by the user. This behavior is called Content Projection.
They are used to create configurable components. This means the components can be configured depending on the needs of its user. This is well known as Content Projection. Components that are used in published libraries make use of ng-content to make themselves configurable.
Look at an example:
The project-content footer div defines ng-content.
How do customers inject their UI content into project-content?
At runtime, the div element shown above is rendered to the ng-Content tag of the Project-Content Component.
Let’s look at a more complicated example:
The value of the Ng-content select attribute determines exactly what UI content is injected into the Ng-content.
Here we have first select to render header h1 element. If the projected content has no h1 element it won’t render anything.
The first select renders the H1 element, and Angular doesn’t inject content if the injected content doesn’t have one.
Similarly the second select looks for a div.
The rest of the content gets rendered inside the last ng-contentwith no select.
Everything else is injected into the final ng-content without the select attribute.
Example of consuming the project-content:
More of Jerry’s original articles can be found in “Wang Zixi” :
