Search⌘ K
AI Features
Home
Courses
Angular: Designing and Architecting Web Applications

Selecting Content

Explore how to use Angular's NgContent directive with the select attribute to insert content dynamically into multiple locations within a component. Understand how to maintain HTML structure integrity and use CSS selectors to optimize the display of optional content. This lesson helps you manage component content effectively for scalable Angular applications.

We'll cover the following...

In some cases, we may want to insert content into different locations in a component. We can use the NgContent directive to specify what content can be loaded in its place.

For this example, we’re going to add a heading section for the alert component. Bootstrap supports a heading by adding an <h4> element with the alert-heading class.

HTML
<div class="alert alert-success">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
</div>

It is possible to insert this heading without modifying the component.

HTML
<app-alert>

  <h4 class="alert-heading">Well done!</h4>

  <p>Aww yeah, you successfully read this important alert message.</p>

</app-alert>

This works, but the problem with it is that we have to ...