Angular 6 - Şablonlar

Angular 6 kullanır <ng-template> yerine Angular 4'e benzer etiket olarak <template>Angular2'de kullanılır. Angular 4'ün değişmesinin nedeni<template> -e <ng-template> çünkü arasında bir isim uyuşmazlığı olması <template> etiketi ve html <template>standart etiket. Tamamen ileride kullanımdan kaldırılacaktır.

Şimdi şablonu birlikte kullanalım if else durumu ve çıktıyı görün.

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>

Span etiketi için, if ile ifade else koşul ve şablon koşul1, yoksa koşul2'yi çağırır.

Şablonlar şu şekilde adlandırılacaktır -

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

Koşul doğruysa, koşul1 şablonu çağrılır, aksi takdirde koşul2.

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);
   }
}

Tarayıcıdaki çıktı aşağıdaki gibidir -

Değişken isavailableyanlıştır, bu nedenle koşul2 şablonu yazdırılır. Düğmeye tıklarsanız, ilgili şablon çağrılacaktır. Tarayıcıyı incelerseniz, etki alanında hiçbir zaman span etiketini alamayacağınızı göreceksiniz. Aşağıdaki örnek, aynısını anlamanıza yardımcı olacaktır.

Tarayıcıyı incelerseniz, domun span etiketine sahip olmadığını göreceksiniz. VarCondition is invalid from template dom.

Html'deki aşağıdaki kod satırı, dom içindeki span etiketini almamıza yardımcı olacaktır.

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

O zaman koşulunu kaldırırsak, "Condition is valid"tarayıcıdaki mesaj ve span etiketi de dom içinde mevcuttur. Örneğin,app.component.tsbiz yaptık isavailable true olarak değişken.

Yazdır