This is the 21st day of my participation in Gwen Challenge. For details, see Gwen Challenge.

A template engine is a way to generate dynamic HTML in Web applications. It is responsible for combining data models with HTML templates (template rendering) to produce the final HTML. The syntax for writing HTML templates is called template syntax. The expressiveness and extensibility of template syntax determine the ease of use of template engines. This article introduces the Angular template engine, ng-template, used in the Refactoring console.

Ng – introduction of the template

Ng-template is represented as an Angular template: this means that the contents of this tag will contain part of the template, which can then be combined with other templates to form the final component template.

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

ng-container

Ng-container is a logical container, one of the Angular structural directives that contain controls on whether internal elements are displayed or not.

Ng-container can contain any element, including text, but does not itself generate element labels and does not affect page style and layout. Contains content that, if not controlled by other instructions, is rendered directly to the page.

The basic grammar

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

After the rendering

<div>
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
</div>
Copy the code

ngIf

NgIf is used to render the content of the THEN or else template at the specified location, based on the value of the expression.

* 'then' templates default to the inline template associated with the ngIf directive unless bound to a different value. * 'else' templates default to NULL unless they are bound to a corresponding value.Copy the code

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>Copy the code

Use the else block

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

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

Use then and else blocks

<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>
Copy the code

ngFor

NgFor is a way to repeat a template using each iterable item as its context. Provides additional values that can be aliased by local variables:

  • index– The current project position is 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>
Copy the code

ngClass

The ngClass directive changes the class property bound to the component or element to which it is attached.

<a
      class="favorite"
      [ngClass]="[isFavorite ? 'text-dark' : 'text-gray']"
      (click)="setFavorite()"
>
      <i class="fe fe-heart font-size-21"></i>
</a>
Copy the code

NgClass takes the first argument to the class name and the second argument to the Boolean value. If true, add the first argument to the class.

ngStyle

NgStyle to modify the style property of a component or element.

<div class="label-color" [ngStyle]="{'background-color': Labels | getById: labelId: 'color'} "> < / div > / / judgment add < div [ngStyle] =" {' background - color: template = = = 'dark'? 'dark' : 'light' }"></<div>Copy the code

ngSwitch

Ng-switch displays or hides the corresponding part based on the value of the expression.

  • Ng-switch-when – indicates the conditional option. If matches are selected, the option is displayed. If other matches are selected, the option is removed.

  • Ng-switch-default – Sets the default option. If no match is found, the default option is displayed.

<div ng-switch=" expression/variable ">< div ng-switch-when="value"></div> <div ng-switch-when="value"></div> <div ng-switch-when="value"></div> <div ng-switch-default></div> </div>Copy the code

After the