ng-template

Define a template - no rendering by default

List rendering example - renderings

html

<div *ngFor="let person of persons;">
  <div>full name: {{person.name}}</div>
  <!-- adopt ngTemplateOutlet Instruction output template Content of context You can pass data to the template, $implicit Is the default data -->
  <!-- ng-container Placeholders without rendering specific labels -->
  <ng-container *ngTemplateOutlet="money; context: { $implicit: person, money: person.money }"></ng-container>
</div>

<!-- #Money defines the template variable let item of the template. The default data is the item variable. let-m="money" is the declared m variable, and the value is the money field -- >
<ng-template #money let-item let-m="money">
  <div>{{ item.name }}Daily income {{ m }} element</div>
</ng-template>

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ng-template',
  templateUrl: './ng-template.component.html',
  styleUrls: ['./ng-template.component.scss']
})
export class NgTemplateComponent implements OnInit {

  persons: { name: string; money: number; }[] = [
    { name: 'jack', money: 120 },
    { name: 'Li Li', money: 210 },
    { name: 'Zhang San', money: 170 },
  ];
  constructor(){ }
  ngOnInit(): void { }
}

ng-container

• You can use the instructions above, but it does not render itself as a real DOM.
• It can be used as a placeholder, or as a container including parallel elements when multiple parallel elements have the same rendering conditions.
• Conditional content projection can be performed in conjunction with

ng-content

• The < ng content > element is a placeholder that does not create a real DOM element< Those custom attributes of NG content > will be ignored.
• Content projection - maps the template inside the component label to a unique location in the component. It is similar to vue's slot and react's children

eg: we have defined a general UI component, in which a part needs to be rendered according to the use situation. You can use this to render different contents

Single content projection

• In the component template, add the < ng content > element so that the content you want to project appears in it.

Usage scenario

<!-- The first scenario -->
<app-form-unit>
  <div>this is first message</div>
</app-form-unit>

<!-- The second scenario -->
<app-form-unit>
  <div>this is second message</div>
</app-form-unit>

App form unit component

<div style="width: 200px;border: 1px solid #dcdcdc;padding: 10px;">
  <h3>Here is the title</h3>
  <div>Here is the subtitle</div>
  <div class="right-content">
    <h5>What may be different next</h5>
    <ng-content></ng-content>
  </div>
</div>

design sketch

Multi content projection

• Add the select attribute to the < ng content > element. The selector used by Angular supports any combination of tag names, properties, CSS classes, and: not pseudo classes.
• If your component contains < ng content > elements without the select attribute, the instance will receive all projection components that do not match other < ng content > elements.

Usage scenario

<app-form-unit>
  <div>this is default01</div>
  <div class="header">this is header</div>
  <div>this is default02</div>
  <div body>this is body</div>
  <div>this is default03</div>
  <footer>this is footer</footer>
  <div>this is default04</div>
</app-form-unit>

App form unit component

<div>
  <h3>Herder Title</h3>
  <ng-content select=".header"></ng-content>
  <h3>Body Title</h3>
  <ng-content select="[body]"></ng-content>
  <h3>Default Title</h3>
  <ng-content></ng-content>
  <h3>Footer Title</h3>
  <ng-content select="footer"></ng-content>
</div>

design sketch

Conditional content projection

• If your component needs to conditionally render content or render content multiple times, you should configure the component to accept a < ng template > element containing the content to be conditionally rendered.
• In this case, it is not recommended to use the < ng content > element, because as long as the user of the component provides content, even if the component has never defined the < ng content > element or the < ng content > element is located inside the ngIf statement, the content will always be initialized.