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

Selecting Content

In this lesson, we'll learn how to insert content into specific locations in a child component.

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 ...