ANGULAR 4X
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Data binding trong Angular 4

Data binding là cơ chế lấy dữ liệu từ trong component và đưa ra view. Data Binding đã có từ AngularJS, Angular 2 và giờ cũng có ở Angular 4.
Để bind dữ liệu ra view, ta sử dụng cặp ngoặc nhọn {{ten_bien}}. ten_bien chính là tên biến bạn đặt phía bên trong file component.ts
Trong bài này, chúng ta sẽ tìm hiểu về cơ chế data binding trong angular 4 thông qua vòng lặp ngFor và điều kiện ngIf nhé.

Data binding với ngFor

Ví dụ này chúng ta sẽ tạo ra 1 dropdown list chứa các tháng trong năm.

Đầu tiên, ta khai báo mảng dữ liệu chứa các tháng trong năm bên trong file app.component.ts như sau

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 4 Project!';
    // Khai báo mảng chứa các tháng
    months = ["Tháng 1", "Tháng 2", "Tháng 3",
                "Tháng 4", "Tháng 5", "Tháng 6",
                "Tháng 7", "Tháng 8", "Tháng 9",
                "Tháng 10", "Tháng 11", "Tháng 12"];
}

Tiếp đó, ta bind dữ liệu tháng khai báo bên file component ra view

app.component.html
<div> Months :
    <select>
        <option *ngFor="let i of months">{{i}}</option>
    </select>
</div>

months là một mảng chứa các tháng. Câu lệnh let i of months đưa lần lượt dữ liệu các phần tử của mảng months vào biến i, nghĩa là i sẽ lần lượt chứa các giá trị Tháng 1, Tháng 2,..., tháng 12. Biến i nằm trong cặp ngoặc {{i}} sẽ bind dữ liệu của i ra view.
Vòng for đặt chạy trong thẻ option nên sẽ sinh ra 12 thẻ option con như sau

html sinh ra từ câu lệnh NgFor
<option>Tháng 1</option>
<option>Tháng 2</option>
<option>Tháng 3</option>
<option>Tháng 4</option>
<option>Tháng 5</option>
<option>Tháng 6</option>
<option>Tháng 7</option>
<option>Tháng 8</option>
<option>Tháng 9</option>
<option>Tháng 10</option>
<option>Tháng 11</option>
<option>Tháng 12</option>

Ta nhận được kết quả như hình

Kết quả màn hình data binding với ngFor

Data binding với ngIf

Cú pháp với If trong angular 4 như sau:

app.component.html
<p *ngIf="condition; then true_condition else false_condition"></p>
<ng-template #true_condition>Điều kiện đúng</ng-template>
<ng-template #false_condition>Điều kiện sai</ng-template>

Vế then true_condition có thể được lược bỏ và viết trực tiếp nội dung điều kiện đúng vào trong thẻ chứa ngIf, như sau

<p *ngIf="condition; else false_condition">Điều kiện đúng</p>
<ng-template #false_condition>Điều kiện sai</ng-template>

Trong trường hợp có cả template true_condition và có cả nội dung trong thẻ ngIf thì template #true_condition sẽ được ưu tiên hơn. Nghĩa là nội dung bên trong template #true_condition sẽ được sinh ra, còn nội dung trong ngIf sẽ không được sinh ra

<p *ngIf="condition; then #true_condition else false_condition">Điều kiện đúng này sẽ không được sinh ra</p>
<ng-template #true_condition>Điều kiện đúng này sẽ được sinh ra</ng-template>
<ng-template #false_condition>Điều kiện sai</ng-template>

Thử lấy 1 ví dụ nho nhỏ: đặt 1 biến là is_available trong component. Nếu giá trị của biến này là true thì in ra "điều kiện đúng", ngược lại, nếu giá trị của biến này là false thì in ra "điều kiện sai"

Đầu tiên, khai báo biến is_available trong component:

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 4 Project!';
    //array of months.
    months = ["Tháng 1", "Tháng 2", "Tháng 3",
                "Tháng 4", "Tháng 5", "Tháng 6",
                "Tháng 7", "Tháng 8", "Tháng 9",
                "Tháng 10", "Tháng 11", "Tháng 12"];
    is_available = false; // Declare varialbe is_available
}

Tiếp theo, thêm điều kiện để hiển thị dữ liệu

app.component.html
<p *ngIf="is_available; then true_condition else false_condition"></p>
<ng-template #true_condition><p>Điều kiện đúng</p></ng-template>
<ng-template #false_condition><p>Điều kiện sai</p></ng-template>

Ta được kết quả như hình:

Kết quả màn hình data binding với ngIf

OK. Nội dung bài data binding đến đây là hết rồi. Ở bài sau, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm soát các sự kiện trong Angular 4.

Tổng hợp dữ liệu trong bài:

Cùng chuyên mục:

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Ứng dụng single page Angular 4

Ứng dụng single page Angular 4

Trong bài học này, chúng ta sẽ thực hành tạo một ứng dụng single page…

Angular 4 CLI

Angular 4 CLI

Trong bài này, chúng ta cùng tìm hiểu về Angular CLI, cách cài đặt và…

Angular 4 Material

Angular 4 Material

Trong bài này, chúng ta sẽ tìm hiểu về material - các thành phần được…

Animation trong Angular 4

Animation trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về animation trong Angular 4.

Form trong Angular 4

Form trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về form trong Angular 4, 2 cách…

Http service trong Angular 4

Http service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về http service trong Angular 4.

Service trong Angular 4

Service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về service trong Angular 4

Routing trong Angular 4

Routing trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về routing - cơ chế kiểm soát…

Pipe trong angular 4

Pipe trong angular 4

Trong bài này, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Directive trong Angular 4

Directive trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về directive trong Angular 4, cách tạo…

Template trong Angular 4

Template trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về template trong Angular 4

Event binding trong Angular 4

Event binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm…

Module trong Angular 4

Module trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về module trong Angular 4: cách khai…

Component trong Angular 4

Component trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về component - thành phần được sử…

Tạo project Angular 4 đầu tiên

Tạo project Angular 4 đầu tiên

Ở bài này, chúng ta sẽ đi vào tìm hiểu cách tạo project Angular 4.

Angular 4 - Cài đặt môi trường

Angular 4 - Cài đặt môi trường

Trong bài này mình sẽ hướng dẫn các bạn cài đặt một số phần mềm…

Tổng quan về Angular4

Tổng quan về Angular4

Trong bài này, chúng ta sẽ tìm hiểu tổng quan về Angular 4.

Top