Let's briefly talk about Angular template engine ng-template

This article takes you through the Angular template engine ng-template used in the reconstruction management console, and briefly introduces ng-container, ngIf, ngFor, and ngClass in ng-template. , ngStyle and ngSwitch.

The template engine is a way to generate dynamic HTML in Web applications. It is responsible for combining the data model with the HTML template (i.e. template rendering) to generate the final HTML. The syntax for writing HTML templates is called template syntax. The expressiveness and scalability of template syntax determine the ease of use of the template engine. [Related tutorial recommendations: "angular tutorial"]

ng-template introduction

ng-template Represented as AngularTemplate: This means that the content of this tag will contain part of a template, which can then be combined with other templates to form the final component template.

ng-template mainly includes: ng-container, ngIf, ngFor, ngClass, ngStyle and ngSwitch.

ng-container

ng-container is a logical container and one of the Angular structural directives , used to control whether internal elements are displayed or not.

ng-container can contain any element, including text, but it will not generate element tags by itself, nor will it affect page style and layout. The content contained will be rendered directly to the page if not controlled through other instructions.

Basic syntax

<div>
  <ng-container>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
  </ng-container>
</div>

After rendering

<div>
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
</div>

ngIf

ngIf is used to render the content of the then or else template at the specified position based on the value of the expression.

* `then` 模板除非绑定到不同的值，否则默认是 ngIf 指令关联的内联模板。

* `else` 模板除非绑定对应的值，否则默认是 null。复制代码

Simple form

<div *ngIf="!isLoggedIn">
  Please login, friend.
</div>

<!-- logic && operator -->
<div *ngIf="isLoggedIn && !isNewUser">
  Welcome back, friend.
</div>

<!-- logic OR operator -->
<div *ngIf="isLoggedIn || isNewUser">
  Welcome!
</div>

Use else block

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

Use then and else block

<ng-container *ngIf="isLoggedIn; then loggedIn; else loggedOut"></ng-container>

<ng-template #loggedIn>
  <div>
    Welcome back, friend.
  </div>
</ng-template>
<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

ngFor

ngForA way to iterate a template using each item of an iterable as the context of the template. Additional values ​​are provided that can be aliased by local variables:

• index - the position of the current item in the iteration starting from 0
• first - true if the current item is the first item in the iterable
• last - true if the current item is the last item in the iterable
• even - true if the current index is even
• odd - true if the current index is odd

<mat-list-item *ngFor="let event of events">
    <h3 matLine>{{event.title}}</h3>
    <p matLine class="secondary-text">{{event.detail}}</p>
</mat-list-item>

ngClass

ngClass directive changes the class attribute of the component or element to which it is attached.

<a
      class="favorite"
      [ngClass]="[isFavorite ? &#39;text-dark&#39; : &#39;text-gray&#39;]"
      (click)="setFavorite()"
>
      <i class="fe fe-heart font-size-21"></i>
</a>

ngClassThe first parameter is the class name, and the second parameter is the boolean value. If it is true, the class of the first parameter is added.

ngStyle

ngStyle to modify the style attribute of the component or element.

<div class="label-color" [ngStyle]="{&#39;background-color&#39;: labels | getById:labelId:&#39;color&#39;}"></div>
// 判断添加
<div [ngStyle]="{&#39;background-color&#39;:template === &#39;dark&#39; ? &#39;dark&#39; : &#39;light&#39; }"></<div>

ngSwitch

ng-switchDisplay or hide the corresponding part according to the value of the expression.

• ng-switch-when - Corresponding condition option, if the matching option is selected, it will be displayed, otherwise it will be removed if it matches.

• ng-switch-default - Set the default option. If there is no match, the default option will be displayed.

<div ng-switch="表达式/变量">
    <div ng-switch-when="value"></div>
    <div ng-switch-when="value"></div>
    <div ng-switch-when="value"></div>
    <div ng-switch-default></div>
</div

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Let's briefly talk about Angular template engine ng-template. For more information, please follow other related articles on the PHP Chinese website!