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.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
|cookielawinfo-checbox-analytics||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".|
|cookielawinfo-checbox-functional||11 months||The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".|
|cookielawinfo-checbox-others||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.|
|cookielawinfo-checkbox-necessary||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".|
|cookielawinfo-checkbox-performance||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".|
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.