What is content projection?
Sometimes it’s not enough to just design a component and have a fixed view provided in the component’s template.
For example, let’s take a card component that prints the provided data as a fancy card.
One way to create such a component is to get the title, body and footer as component inputs via
and the template (using Bootstrap for styling)
Sure, it does work fine, but what if we want to pass rich text which contains text decorations such as bold, italics, etc? That’s where content projection comes in.
Content projection using ng-content
ng-content tag when used in a component's template projects the content provided during the component's usage
Whatever goes between the component’s tags will be projected as part of the component
The projected content could contain normal html elements and also other angular components.
After modifying our card component to use content projection, it can suddenly have images, colored text, etc.
Sometimes there is a requirement to project only specific elements, in that case projection selectors can be used.
These are the following selectors that could be used
CSS Class selector
Will component’s styles apply to projected content?
No. Styles declared within a component will not be applied to the projected content unless the component’s ViewEncapsulation is set to