Content Projection in Angular
Overview
You may use content projection to put a shadow DOM into your component. Simply said, if you wish to introduce HTML elements or other components into a component, you use the idea of content projection.
What is a Content Projection?
Content projection is a method of importing HTML content from outside a component and inserting it into the component's template in certain content.
Content projection allows a directive to use templates while still being able to clone the original content and add it to the DOM, which is a programming interface for HTML and XML documents and represents a page where programs can change the document structure, style, and content.
Common Implementations of Content Projection in Angular
Content Projection has three different methods or uses cases that we will be covering:
Single-slot – where a component accepts content from a single source
Multi-slot – where a component accepts content from multiple sources
Conditional – where components that use conditional content projection render content only when specific conditions are met
Single-slot Content Projection
Single-slot content projection is the most basic type of content projection. The term single-slot content projection refers to the creation of a component into which only one component can be projected.
Create a component that uses single-slot content projection
To create a component that uses single-slot content projection:
- Create a component.
- In the template for your component, add an <ng-content> element where you want the projected content to appear.
Users of this component may now project their own message into the component with the <ng-content> element in place. As an example:
Here, <p>Projected content!</p> will be displayed instead of <ng-content></ng-content>
Multi-slot Content Projection
A component may have several slots. Each slot can have its own CSS selector that specifies what content gets into it. Multi-slot content projection is the name given to this pattern. You must indicate where you want the projected content to appear using this pattern. This is accomplished by utilizing the select property of <ng-content>.
Create a component that uses multi-slot content projection
- Create a component.
- In the template for your component, add an <ng-content> element where you want the projected content to appear.
- Add a select attribute to the <ng-content> elements. Angular supports selectors for any combination of tag name, attribute, CSS class, and the
pseudo-class.
For example, the following component uses two <ng-content> elements.
Here, one of the <ng-content> contains select="[heading]. i.e. it will only project the data which contain the heading attribute.
If your component contains a <ng-content> element without a select property, that instance will get all projected components that do not match any of the other<ng-content> elements.
Single-slot vs Multi-slot
| Single Slot | Multi Slot |
|---|---|
| a component accepts content from a single source | a component accepts content from multiple sources |
| Doesn't have to name the slot | One slot can be without a name which will be primary but other slots will have their name. |
Conditional Content Projection
If your component has to conditionally render content or render content several times, you should set it up to accept a <ng-template> element containing the conditionally rendered content.
It is not suggested to utilize a <ng-content> element in these circumstances because when a component's consumer delivers the content, the content is always initialized, even if the component does not specify a <ng-content> element or if that <ng-content> element is inside of a ngIf statement.
You may have your component directly render content based on any condition you want, as many times as you like, using a <ng-template> element. Angular will not render a <ng-template> element's content unless it is expressly rendered.
Here <ng-template> will render only when if the condition failed.
Projecting Content in More Complex Environments
To identify where to project your content, as detailed in Multi-slot Content Projection, you often use an attribute, element, CSS Class, or any combination of the three.
In some circumstances, you may wish to project content as a separate element. The content you intend to transmit, for example, maybe a child of another element. Use the ngProjectAs property to do this.
In this case, the content we want to communicate is contained within another element. The ngProjectAs property is used by the template to project this content as intended. ngProjectAs uses the [heading] selector to project the full <ng-container> element into a component.
Conclusion
- Content projection is a pattern in which you insert, or project, the content you want to use inside another component.
- Type of content projection
- Single slot
- Multi slot
- Conditional