Every serious Angular developer needs to know about Content Projection, an important feature used in every substantial application. Libraries such as Angular Material and Ng Bootstrap depend on it. But surprisingly, none of the books and training materials seem to cover it. Even the documentation at angular.io barely gives it a mention.
Typically, in Angular you make a reusable, general-purpose component to be embedded in other specific-purpose components. Content projection flips this around, letting you embed specific-purpose functionality into general-purpose reusable components. This technique enables the creation of reusable containers and wrapper components.
While many use cases exist for Content Projection, here we’ll demo a modal dialog box component. In our example, every modal instance has a semi-transparent overlay that covers the page (and forces the user to interact with the modal), and a title bar and body—both with styling standardized within the app. We’d like to capture the common elements and structure of a modal once in the code, but let each modal have specific content and functionality for the use at hand. This is an ideal use case for content projection.
Content projection works by taking the html content placed within the component’s DOM element (by the component user) and letting the component itself decide when and how to show that content. In this way, a reusable container is created, the contents of which vary from use to use. Content is projected via the <ng-content></ng-content> tag. When used without attributes, it will project all the content. Alternately, a select attribute may be used to project specific parts of the content. For our modal, we’ll use separate divs for the title and body areas.
The full html template for the general-purpose modal component, then, is simply:
So, the component captures the div structure we need for the semi-transparent overlay and the raised modal window. It also has wrappers for the title and body, with styling to color them and render them seamlessly together.
Using the component looks something like this:
<button (click)=“showModal = true” class=“primary”>Open Modal</button>
<div title>Welcome to the modal!</div>
This is where the body of the modal goes.
<button (click)=“showModal = false” class=“primary”>OK</button>
Rather than having to cut and paste a complicated boilerplate structure for each modal, we simply need the component element (<app-modal></app-modal>) containing a <div title> and a <div body> for our specific title and body content, respectively.
That’s all there is to it! The full project code for these examples may be downloaded from: https://github.com/jlenthe/angular-content-projection.
Content Projection provides a very powerful reuse technique beneficial for any major application. If your organization is using Angular and needs help maximizing reuse with a custom look-and-feel, please reach out to us. We have extensive experience building custom apps that provide a superior user experience, all while leveraging reusable components to achieve high developer productivity.