Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 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, ...)
Bài viết này được đăng tại [free tuts .net]
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
<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:
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:
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
<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:
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:
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.
Danh sách file tải về
| Tên file tải về | Pass giải nén |
|---|---|
| Source code | freetuts.net hoặc gameportable.net |
