Yesterday, we saw that we could use content projection to pass an HTML template from one component to another. But what if we want to pass multiple different templates? We can use multi-slot content projection.
Here’s what we want to achieve:
In our reusable dialog component, we will have multiple ng-content elements. Each ng-content will have a specific query selecting a template to render:
These queries use the CSS selector syntax. In the above example, we’re using [], which means we are selecting HTML attribute names. As a result, our parent component will pass two distinct templates, one for the body and one for the footer, using the following syntax:
You can see an example of such code in action on Stackblitz.
