Angular

Sử dụng Directive ngIf trong Angular

nguyen.le , 15 min read

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 để xóa 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 điề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ẽ xóa 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.

6. Video Demo

7. Source code

Sourcecode

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments