A brief discussion on Angular template directives: usage of ng-template and ng-container

This article will give you a brief introduction to the ng-template and ng-container directives of the Angular template, and introduce how to use the ng-template and ng-container directives.

Introduction to ng-template directive

ng-template is an Angular structural directive used to render HTML. It is never shown directly. In fact, Angular replaces the ng-template and its contents with an annotation before rendering the view. [Related tutorial recommendation: "angular tutorial"]

If you do not use structural directives and just wrap some other elements into ng-template, those elements will be invisible.

Instructions like *ngFor and *ngIf will internally translate these attributes into an element in Angular and use it to wrap the host element.

Introduction to the ng-container directive

To avoid creating extra divs, we can use ng-container instead, which is a grouping element, but it does not pollute the style Or element layout, because Angular won't put it into the DOM at all. ng-container is a syntax element that is recognized and processed by the Angular parser. It's not a directive, component, class, or interface, but more like the curly braces in an if block in JavaScript.

ng-container usage

Usage 1 (the most basic usage)

We are here There are some judgments to be made when writing in a list loop. We know that angular's structural instructions do not allow two to exist at the same time. At this time, if we do not want to add extra divs, we can use ng-container

<ul>
    <ng-container *ngFor="let item of list">
        <li *ngIf="item.context">{{item.context}}</li>
    </ng-container>
</ul>

Usage 2 (used in combination with ngSwitch)

<ng-container [ngSwitch]="type">
    <ng-container *ngSwitchCase="&#39;title&#39;">标题</ng-container>
    <ng-container *ngSwitchCase="&#39;text&#39;">内容</ng-container>
    <ng-container *ngSwitchDefault>其他</ng-container>
</ng-container>

Of course, ngSwitch can also be written directly on the html tag.

Usage three (used in conjunction with ng-template)

can be used in conjunction with template to extract duplicate module content, or to pass Specifies the template to be displayed. For example, in the following example, Party A has Party A’s name and introduction, and Party B also has these introductions, so we can integrate the joint introductions.

<div>
    <!--甲方-->
    <div>
        <div class="left">甲方：</div>
        <div class="right">
            甲方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container>
            <!--也可以写成这种方式-->
            <!--
            <ng-container [ngTemplateOutlet]="introduce"
                [ngTemplateOutletContext]="{data: data.partyA}">
            </ng-container>
            [ngTemplateOutlet]也可用在ng-template上
            -->
        </div>
    </div>
    <!--乙方-->
    <div>
        <div class="left">乙方：</div>
        <div class="right">
            乙方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyB}"></ng-container>
        </div>
    </div>
    <!--let-data="data"就是上面传进来的值-->
    <ng-template #introduce let-data="data">
        <p>合同介绍......</p>
    </ng-template>
</div>

ngTemplateOutlet is a string that defines the template reference and the context (i.e. ng-template) object of the template, so if there are multiple template references, you can use this method ngTemplateOutletContext is the context (i.e. ng-template) object EmbeddedViewRef attached to. This should be an object whose keys can be used for bindings declared by the local template let. Using $implicit a key in a context (i.e. ng-template) object will set its value to the default value. ngTemplateOutlet can also be used for templates passed in from the outside

child.component.html

<ng-template [ngTemplateOutlet]="tplRef" [ngTemplateOutletContext]="{data: data}"></ng-template>

child.component.ts

@Input() tplRef: TemplateRef<any>

ng-template usage

##Usage 1

Used in conjunction with *ngIf, this eliminates the need to add two different judgments Condition, you can use if else statement directly in html

<div *ngIf="text; else noData">{{text}}</div>
<ng-template #noData>
    <div class="gary">暂无数据</div>
</ng-template>

Usage 2

When using antd's modalService to create a dialog box in the page, you can The template is written in html, loaded by reference and placed in the modal's nzContent (it's a bit confusing, look at the code)

<ng-tempalte #content>xxxxxxx</ng-template>

export class AppComponent implements OnInit {
    // 引入模板
     @ViewChild(&#39;content&#39;) contentTpl: TemplateRef<any>;
    ngOnInit() {
        this.modalService.create({
            nzTitle: &#39;标题&#39;,
            nzContent: this.contentTpl
        })
    }
}

Usage three

Pass it to the component as an input variable in the form of a template, so that we can write what we want when using this component. For example, if we write a shared component that has no data yet, we usually only need to pass text. In some special cases, we may need to add some new buttons.

empty.component.html

<div>
    <img src=""/>
    <div>
        <ng-container [ngSwitch]="true">
            <ng-container *ngSwitchCase="isTemplate(text)"
                [ngTemplateOutlet]="text"
            ></ng-container>
        </ng-container>
        {{text || &#39;&#39;}}
    </div>
</div>

empty.component.ts

export class EmptyComponent {
    @Input() text: TemplateRef<any>
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}

Summary, these are some of the most basic Usage, these are the usages that I know now. If you know more, you are welcome to add.

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of A brief discussion on Angular template directives: usage of ng-template and ng-container. For more information, please follow other related articles on the PHP Chinese website!