Customizable Ng-Content Elements

There are a few Angular core directives that we learned about recently, like NgIf, NgClass, and others. In this lesson, we’ll learn one more called ng-content. It’s a rather standard and commonly used directive, although we’ll learn it from scratch in this lesson. Most importantly, we’ll learn how to customize it using our attribute directives.

The ng-content directive

Creating highly reusable components often relates to a technique called content projection. Content projection is a pattern in component design that allows us to insert content generated from another component.

Let’s elaborate on the concept using some familiar examples. We’ll begin by asssuming that in the application codebase, we have many templates like this:

<button (click)="save()">
	Submit
	<fa-icon [icon]="faCheck"></fa-icon>
</button>

In the application, there’s a pattern to how buttons look. They often have their title and icon next to them. For this example, we might use “Font Awesome” icons.

It’s important to know that there’s nothing technically wrong with the code itself. However, duplications begin to appear if we have plenty of snippets like these in the codebase.

Most likely, the buttons will share the same style. They need to have a common button or button-primary class. They may need to apply a common directive, such as app-button or something similar. In the end, we may have a complicated snippet that duplicates, like this:

<button app-button class="button button-primary" (click)="save()">
	Submit
	<fa-icon [icon]="faCheck"></fa-icon>
</button>

The only thing that really changes when we use this template is the button’s title, which will look like this:

...