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

Ng – introduction of the template

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

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

ng-container

An ng-container is a logical container, one of Angular’s structural directives, that contains controls for displaying internal elements.

The ng-container can contain any element, including text, but does not itself generate element labels or affect page style or layout. Contains content that, if not controlled by other directives, is rendered directly into the page.

The basic grammar

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

After the rendering

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

ngIf

NgIf is used to render the contents of the Then or Else template at the specified location, based on the value of the expression.

* 'Then' templates are inline templates associated with ngIf directives by default, unless bound to a different value. * 'else' The template defaults to null unless bound to the corresponding value.

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 the else block

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

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

Use the 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

NgFor is a way to repeat a template using each item that can be iterated 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 an iteration
  • last– True if the current item is the last item in the iterable list
  • 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

The NgClass directive changes the class attributes that are bound to its attached component or element.

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

The first argument to ngClass is the name of the class. The second argument is a Boolean value. If true, the class with the first argument is added.

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>

ngSwitch

The ng-switch shows or hides the corresponding part of the expression based on its value.

  • ng-switch-when– Corresponding to the conditional option, if the match is selected, select the display, and remove the other matching options.
  • ng-switch-default– Set the default options. If none matches, 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>

After the