Welcome to the world of Angular content projection! Are you creating a lot of similar components or keep on extending the HTML template to fit new UI scenarios? Angular content projection comes to the rescue! With content projection, you'll be able to create more dynamic components that can adapt to a wide range of use cases. Whether you're building a complex application or a simple website, Angular content projection is your best friend for creating components that are both dynamic and easy to use.

Table of content:

What is Angular Content Projection?

The basics of Angular content projection

Conditional templates with content projection

Conclusion

What is Angular Content Projection?

Content projection is a feature in Angular that allows you to project content from the HTML template of the parent component into the HTML template of the child component. This allows you to create reusable components that can display different content each time you use the component inside an HTML template. It's like a "wildcard" element that can accept any content you throw at it, allowing you to create reusable components that can be customized to fit the specific needs of the page where it's used. Some examples where Angular content projection would come in handy are:

1. Modals: If you create a modal component, the probability you want to display different types of content inside your modal component is quite high! This can be done with content projection so you can project any content into the modal you want.

2. Tabs and accordions: Tab and accordion components are other good candidates for content projection. If you have a tab or accordion component you might want to display various types of content inside the tab and accordion content areas. In one place you might want to use a tab with simple text inside it and on some other page you might want to display a grid or a form inside the tabs.

3. Layouts: Angular content projection can also be useful when you want to create a layout where you have a content and sidebar area for example and want to project different content into these areas based on the page you are on. You could create a layout component for this and use content projection to project the content into the correct areas (content area, sidebar area, footer, etc).

The basics of Angular content projection

To use content projection, you'll need to create a component that will act as the container to receive and display the projected content. In this component, you'll define an element in the HTML template with the <ng-content> tag that will act as the insertion point for the projected content. Let's create a card component as an example and add this to the HTML template of the component:

Gist

Now you can declare the card component inside the HTML template of another component, this parent component will provide the content to be projected into the card component. You project content by adding it inside the opening and closing tag of the card component like this:

Gist

As you can see this allows you to project content from the parent component template inside the card component template and it will be displayed inside the <ng-content> tag. If you want to style the projected content you do so in the CSS file of the parent component. This also allows you to separate concerns to the parent component where you declare the projected content; keeping the child component clean and unknowing of the projected content. The same goes for handling events like click, mouse over, and so on.

Use multiple ng-content elements

You might want to project different pieces of content for different parts of the child components. Let's for example say that your card component has a header, body, and footer and you want to project-specific content for each of these areas. To accomplish this you need to create multiple <ng-content> tags and declare the select attribute like this:

Gist

As you can see in the parent component you simply add the name of one of the select tags in the card component to the content and it will be projected to that <ng-content> element. You can also target specific HTML tags instead of using the selector names like this:

<ng-content select="h1"></ng-content>

<ng-content select="img"></ng-content>

<ng-content select="p"></ng-content>

In the examples above, we are using the <ng-content> element with selectors to target the specific HTML elements from the projected content and insert them in the appropriate places in the container component. If you add another <ng-content> without a select attribute this will be used as the default and take in any other content not matching any of the specific <ng-content> tags.

Conditional templates with content projection

Lastly, we are going to have a look at projecting different templates based on a condition. For this, you want to combine ng-content en ng-template to project the desired template based on a condition in the parent component. Let's say you have a Hello and a Goodbye <ng-template> inside the parent component and a boolean that determines if we want to project the Hello of Goodbye template.

Now inside the card opening and closing tag, we add a div with an ng-container inside of it with the ngTemplateOutlet declared on it like this:

Gist

Depending on the hello boolean we feed a template to the ngTemplateOutlet. In the example, I added a click function the toggle the hello boolean so you can switch between the templates by clicking on the div.

Conclusion

Angular content projection is a powerful feature allowing you to add a new level of flexibility to your Angular components. You can project content with single or multiple <ng-content> tags, and use named tags or tags for the projection of specific HTML tags. You can project content conditionally with ng-template tags and build components that fit truly every UI need. So whenever you find yourself keep on extending an HTML template to fit new needs consider using content projection.