Sử dụng Directive ngIf trong Angular

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người cách tạo ngIf là như thế nào?

1. ngIf là gì

Chúng ta sử dụng ngIf để xoá hoặc thêm một phần tử trên web dựa vào điều kiện có thoả mãn hay không

  • Cú pháp ngIf như sau
1
2
3
<p *ngIf="condition">
    các thẻ html sẽ được hiển thị nếu điều kiện là đúng
</p>
  • Chúng ta có thể sử dụng thuộc tính hide để làm đều tương tự như sau
1
2
3
<p [hidden]="condition">
    content to render, when the condition is true 
</p>

Sự khác nhau ở chổ ngIf sẽ xoá hoàn toàn phần tử web ra khỏi DOM . Còn hide thì không xoá hẳn phần tử đó ra khỏi DOM. Mặc dù trên giao diên ta thấy phần tử đó bị mất đi

2. Sử dụng phủ định trong ngIf

1
2
3
<p *ngIf="!condition">
    content to render, when the condition is false
</p>

3. Sử dụng if else trong ngIf

1
2
3
4
5
6
7
<div *ngIf="condition; else elseBlock">
    content to render, when the condition is true 
</div>
 
<ng-template #elseBlock>
    content to render, when the condition is false 
</ng-template>

4. Sử dụng then else trong ngIf

1
2
3
4
5
6
7
8
9
10
11
<div *ngIf="condition; then thenBlock else elseBlock"> 
    This content is not shown
</div>
 
<ng-template #thenBlock>
    content to render when the condition is true.
</ng-template>
 
<ng-template #elseBlock>
    content to render when condition is false.
</ng-template>

5.Ví dụ ngIf

Ta sẽ làm ví dụ về kiểm tra một check box có bị check hay không? Nếu check box bị check thì ta sẽ thay đổi giá trị.

Ta có component class có chứa giá trị showMe. Mặc định là true.

1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string = 'ngIf Example' ;
  showMe: boolean;
}

Tiếp đến ta có file template html như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<h1>Simple example of ngIf </h1>
 
 
<div class="row">
  Show <input type="checkbox" [(ngModel)]="showMe" />
</div>
 
<h1>ngIf </h1>
 
<p *ngIf="showMe">
  ShowMe is checked
</p>
<p *ngIf="!showMe">
  ShowMe is unchecked
</p>
 
<h1>ngIf Else</h1>
 
<p *ngIf="showMe; else elseBlock1">
  ShowMe is checked
</p>
 
<ng-template #elseBlock1>
  <p>ShowMe is unchecked Using elseBlock</p>
</ng-template>
 
<h1>ngIf then else</h1>
 
<p *ngIf="showMe; then thenBlock2 else elseBlock2">
  This is not rendered
</p>
 
<ng-template #thenBlock2>
  <p>ShowMe is checked Using thenblock</p>
</ng-template>
 
<ng-template #elseBlock2>
  <p>ShowMe is unchecked Using elseBlock</p>
</ng-template>
 
<h1>using hidden </h1>
 
<p [hidden]="showMe">
    content to render, when the condition is true  using hidden property binding
</p>
 
<p [hidden]="!showMe">
    content to render, when the condition is false. using hidden property binding
</p>

Chúng ta sử dụng ngIf và sử dụng ngModel để lấy giá trị của showMe. Nếu true thì ta sẽ show ra dòng chữ ShowMe is checked còn ngược lại là ShowMe is unchecked

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments