Introduction to angular template

Time:2021-7-30

Template engine is a way to generate dynamic HTML in web applications. It is responsible for combining data model with HTML template (i.e. template rendering) to generate 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 engine. In this article, we will introduce the methods used in the refactoring management consoleAngularTemplate engine forng-template

Introduction to ng template

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

ng-templateIt mainly includes:ng-containerngIfngForngClassngStyleandngSwitch

ng-container

ng-containerIs a logical container, isAngularOne of the structured instructions used to control the display of internal elements.

ng-containerIt can contain any element, including text, but it does not generate element labels per se, nor does it affect page style and layout. The content contained, if not controlled by other instructions, will be rendered directly to the page.

Basic grammar

<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

ngIfUsed to render at a specified location according to the value of the expressionthenorelseThe content of the template.

*The 'then' template defaults to the inline template associated with the ngif instruction unless bound to a different value.

*The 'else' template is null by default unless the corresponding value is bound.

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>

Using else blocks

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

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

Using 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>

ngFor

ngForA way to repeat a template using each item that can be iterated as the context of the template. Provides additional values that can be aliased by local variables:

  • index-The location of the current project is in the iteration starting from 0
  • first-True if the current item is the first item in the iteratable
  • last-True if the current item is the last item in the iteratable
  • 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

ngClassDirective changes the class attribute 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>

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 will be added.

ngStyle

ngStyleTo modify the style attribute of a component or element.

<div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
//Judge add
<div [ngStyle]="{'background-color':template === 'dark' ? 'dark' : 'light' }"></<div>

ngSwitch

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

  • ng-switch-when-Corresponding to the condition option, if matching is selected, select to display, and if others are matched, remove them.
  • ng-switch-default-Set the default options. If there is no match, the default options will be 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>

finish