Detailed explanation of Angular component projection

Overview

Dynamically change the content of component templates at runtime. It is not as complicated as routing, it is just a piece of HTML without business logic.

The ngContent directive projects an arbitrary fragment of the parent component's template onto a child component.

1. Simple Example

1. Use the <ng-content> directive in the subcomponent to mark the projection point

<div class="wrapper">
  <h2>I am a child component</h2>
  <div>This div is defined in the child component</div>
  <ng-content></ng-content> 
</div>

2. In the parent component, write the HTML fragment of the projection point to be projected to the child component into the tag of the child component

<div class="wrapper">
  <h2>I am the parent component</h2>
  <div>This div is defined in the parent component</div>
  <app-child2>
    <div>This div is the parent component projected into the child component</div>
  </app-child2>
</div>

Effect:

Subcomponents plus styles:

.wrapper{
    background: lightgreen;
}

Parent component plus style:

.wrapper{
    background: cyan;
} 

2. Multiple <ng-content> projection points

Subcomponents:

<div class="wrapper">
  <h2>I am a child component</h2>
  <ng-content selector=".header"></ng-content>
  <div>This div is defined in the child component</div>
  <ng-content selecter=".footer"></ng-content> 
</div>

Parent component:

<div class="wrapper">
  <h2>I am the parent component</h2>
  <div>This div is defined in the parent component</div>
  <app-child2>
    <div class="header">This is the page header. This div is the parent component projected into the child component. The title is {{title}}</div>
    <div class="footer">This is the footer. This div is the parent component projected into the child component</div>
  </app-child2>
</div> 

The header and footer are projected into the child component, and the title is also projected.

Interpolation expressions in projected content in the parent component template can only bind properties in the parent component, although the content will be projected into the child component.

3. Insert HTML by Angular attribute binding

Add a line to the parent component template:

<div [innerHTML]="divContent"></div>

Add a divContent attribute to the parent component, and the content is a html fragment.

divContent="<div>property binding innerHTML</div>";

Effect

4. Comparison of ngContent directive and attribute binding innerHTML

[innerHTML] is a browser specific API.

The ngContent directive is platform independent. Multiple projection points can be bound.

Give priority to ngContent directives

The above is a detailed explanation of the projection of Angular components. For more information about the projection of Angular components, please pay attention to other related articles on 123WORDPRESS.COM!