Tìm hiểu về template trong Angular 7

 Angular 7 sử dụng <ng-template> làm thẻ thay vì <template> được sử dụng trong Angular2. <ng-template> đã được sử dụng kể từ khi phát hành Angular 4 và phiên bản trước đó, tức là Angular 2 sử dụng <template> cho cùng một mục đích. Lý do nó bắt đầu sử dụng <ng-template> thay vì <template> từ Angular 4 trở đi là do có xung đột tên giữa thẻ <template> và thẻ chuẩn html <template>. Nó sẽ hoàn toàn không được chấp nhận khi tiếp tục. Đây là một trong những thay đổi lớn được thực hiện trong phiên bản Angular 4.

Bây giờ chúng ta hãy sử dụng mẫu cùng với điều kiện if else và xem kết quả.

app.component.html

<div style = "text-align:center">

  <h1>Welcome to {{title}}.</h1>

</div>

<div> Months :

  <select (change) ="changeMonth($event)">

     <option *ngFor = "let i of months">{{i}}</option>

  </select>

</div>

<br/>

<div>

  <span *ngIf = "isavailable; then condition1 else condition2">

  </span>

  <ng-template #condition1>Hiện thị Form 1</ng-template>

  <ng-template #condition2>Hiện thị Form 2</ng-template>

</div>

<button (click) = "myClickFunction($event)">

  Click Me

</button>

Từ ví dụ trên bạn sử dụng điều kiện với câu lệnh *ngif trong angular một cách đơn giản thì bạn đã sử dụng nó để kiểm tra và cho hiện thị

<span *ngIf = "isavailable; then condition1 else condition2">

      Condition is valid.

   </span>

 Sau đó khi đã kiểm tra và thực hiện câu lệnh trên thì ở màn hình nó sẽ hiện thị kết quả như sau

 <ng-template #condition1>Condition is valid</ng-template>

   <ng-template #condition2>Condition is invalid</ng-template>

 Trong file app.component.ts bạn có thể thực hiện lệnh điều kiện của nó bằng sự kiện click button trong angular

 import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Example-one';

  months = ["January", "February", "March", "April", "May","June", "July", 

      "August", "September", "October", "November", "December"];

   

   isavailable = true; //variable is set to true

   myClickFunction(event) {

      this.isavailable = !this.isavailable;

   }

   changeMonth(event){

    console.log("Changed month from the Dropdown");

    console.log(event);

   }

}