Angular template ng-template/container/Content

1. ng-template

• Form:<ng-template>...</ng-template>
• The content in NG-template is hidden by default;
• You can use [ngif] to control content display and hiding;
• This tag does not affect the original HTML structure;

HTML:

<ng-template [ngIf]="true">  this is template!</ng-template>

Browser output:

Browser debugging window

2. Template

• Form:<template>...</template>
• The default content is hidden;
• You can use CSS style display to control content display and hiding;
• This tag will affect the original HTML structure;

HTML:

<template style="display: block;">  block;</template>

Browser output:

Browser debugging window:

3. ng-container

• Form:<ng-container>...</ng-container>
• The default content is displayed;
• You can use * ngif to control content display and hiding;
• This tag does not affect the original HTML structure;

HTML:

<ng-container>  this is container!</ng-container>

Browser output:

Browser debugging window:

4. ng-content

• Form:<Ng-content select = 'dom tag/class/ID/attribute '>... </ng-content>
• Used for content ing. reusable components can be customized;
• When this component is referenced, the content in the selector tag is projected (or inserted) into the NG-content of this component;
• There is a select attribute on this tag to find the content that can match the select value and map it here; its value can be the selector, HTML Tag, class or ID of other components;

(1). Code without the select attribute:

// Sub-component @ component ({selector: 'app-child ', template:' <ng-content> </ng-content> '}) // parent component @ component ({selector: 'app-parent', template: '<app-Child> content ing 1 </APP-Child> <app-Child> content ing 2 </APP-Child> '})

Browser output: browser debugging window:

(2) code with the select attribute:

// Content-component.html <div> <ng-content select = "h3.title"> </ng-content> <ng-content select = "P. intro "> </ng-content> <Div class =" content-CMP "> <ng-content select =" app-Extra "> </ng-content> </Div> </div> // parent-component.html <app-content> <P class = 'intro'> section </P> <H3 class = 'title'> title 

Browser output:

4-1. Get <ng-content></ng-content>Ing content

• Contentchild-obtain a single instance
• Contentchildren-returns multiple instances in querylist format

// Content. component. Ts @ contentchild (extracomponent) extracmp: extracomponent; // you can operate the extracmp component instance in the ngaftercontentinit () method after obtaining it.

Angular template ng-template/container/Content