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

Event binding trong Angular 4

Khi người dùng tương tác với ứng dụng bằng các cách khác nhau: dùng bàn phím, click chuột, di chuyển chuột thì đều sinh ra một sự kiện. Các sự kiện này cần được kiểm soát (handle) để thực hiện hành động theo ý muốn của lập trình viên.

Trong bài này, chúng ta sẽ tìm hiểu về event binding (hay còn gọi là gán, kiểm soát các sự kiện) trong Angular 4.

Cách sử dụng

(event_name) = "function_name($event)"

event_name: tên event (click, mouseover, mouseenter, ...)

function_name: tên function trong file component.ts

Ví dụ với sự kiện click

Cùng lấy 1 ví dụ: Chúng ta có 1 button là click me. Khi click vào button này sẽ hiển thị thông báo: "Nhận được lệnh click từ button"

Đầu tiên, thêm button và gán sự kiện click cho button này bên view html

app.component.html
<div style="text-align:center">
    <h1> Welcome to {{ title }}</h1>
</div>
<div> Months :
    <select>
        <option *ngFor="let i of months">{{i}}</option>
    </select>
</div>
<div>
    <span *ngIf="is_valid; then condition1 else condition2">
        Condition is valid.
    </span>
    <ng-template #condition1>Condition is valid</ng-template>
    <ng-template #condition2>Condition is invalid</ng-template>
</div>
// Tạo button và gán sự kiện cho button
<button (click)="myClickFunction($event)">Click Me</button>

Sau đó, khai báo function myClickFunction trong component.ts và thực hiện hiển thị thông báo ra màn hình:

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 = true;
    
// Khai báo hàm xử lý sự kiện cho button
    myClickFunction(event) {
        alert("Nhận được lệnh click từ button");
    }
}

Khi click vào button, ta nhận được thông báo như hình:

Nhận được sự kiện từ button click me

Ví dụ với sự kiện change

Một ví dụ khác: khi thay đổi tháng trong dropdown danh sách các tháng sẽ hiển thị thông báo: "Bạn vừa thay đổi tháng trong dropdown"
Đầu tiên, gán sự kiện change cho dropdown ngoài view html

app.component.html
<div style="text-align:center">
    <h1>
        Welcome to {{title}}.
    </h1>
</div>

<div> Months :
    // Gán sự kiện change cho select
    <select (change)="changemonths($event)">
        <option *ngFor="let i of months">{{i}}</option>
    </select>
</div>
<br/>

<div>
    <span *ngIf="is_valid; then condition1 else condition2">
        Condition is valid.
    </span>
    <ng-template #condition1>Condition is valid</ng-template>
    <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click)="myClickFunction($event)">
    Click Me
</button>

Sau đó khai báo sự kiện changemonths trong component.ts và thực hiện thông báo ra màn hình:

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 = true;
   myClickFunction(event) { 
     alert("Nhận được lệnh click từ button");    
   }
   
    // Khai báo hàm change month để kiểm soát sự kiện change đã khai báo bên html
    changemonths(event) { 
     alert("Bạn vừa thay đổi tháng trong dropdown");    
   }
}

Khi thay đổi một tháng bất kì trong dropdown, bạn nhận được thông báo như hình dưới:

Nhận được sự kiện change từ dropdown

Bài học về event binding trong Angular 4 của chúng ta đến đây là hết rồi. Ở bài sau, chúng ta sẽ tìm hiểu về template 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

Data binding trong Angular 4

Data binding trong Angular 4

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

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