Angular 6 - Modelli

Angular 6 usa il <ng-template> come tag simile a Angular 4 invece di <template>che viene utilizzato in Angular2. Il motivo per cui Angular 4 è cambiato<template> per <ng-template> è perché c'è un conflitto di nomi tra i file <template> tag e il file html <template>tag standard. Sarà deprecato completamente andare avanti.

Usiamo ora il modello insieme al file if else condizione e vedere l'output.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable;then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>

Per il tag Span, abbiamo aggiunto il if dichiarazione con l'estensione else condition e chiamerà template condition1, altrimenti condition2.

I modelli devono essere chiamati come segue:

<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>

Se la condizione è vera, viene chiamato il modello condition1, altrimenti condition2.

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = false;
   myClickFunction(event) {
      this.isavailable = false;
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
      console.log(event);
   }
}

L'output nel browser è il seguente:

La variabile isavailableè falso, quindi viene stampato il modello condition2. Se fai clic sul pulsante, verrà chiamato il rispettivo modello. Se controlli il browser, vedrai che non ottieni mai il tag span nel dominio. Il seguente esempio ti aiuterà a capire lo stesso.

Se controlli il browser, vedrai che il dom non ha il tag span. Ha l'estensioneCondition is invalid from template nel dom.

La seguente riga di codice in html ci aiuterà a ottenere il tag span nel dominio.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click)="myClickFunction($event)">Click Me</button>

Se rimuoviamo la condizione then, otteniamo l'estensione "Condition is valid"messaggio nel browser e il tag span è disponibile anche nel dom. Ad esempio, inapp.component.ts, abbiamo creato il file isavailable variabile come vero.

Stampa