Tìm hiểu Event Binding trong Angular 7

Trong chương này, chúng ta sẽ thảo luận về cách hoạt động của Event Binding trong Angular 7. Khi người dùng tương tác với một ứng dụng dưới dạng di chuyển bàn phím, nhấp chuột hoặc di chuột qua, nó sẽ tạo ra một sự kiện. Những sự kiện này cần được xử lý để thực hiện một số loại hành động. Đây là nơi ràng buộc sự kiện thành hình ảnh.

app.component.html

<div style = "text-align:center">

   <h1>Welcome to {{title}}.</h1>

</div>

<div> Months :

   <select (change) = "changemonths($event)">

      <option *ngFor = "let i of months">{{i}}</option>

   </select>

</div>

<br/>

<div>

   <span *ngIf = "isavailable; 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>

<br/>

<button (click) = "myClickFunction($event)">

   Click Me

</button>

ở trong file html chúng ta thực hiện sự kiện event sự kiện button một cách đơn giản.

(click) = "myClickFunction($event)"

Trong file app.component.ts ta thực hiện code như sau:

import { Component } from '@angular/core';

@Component({

   selector: 'app-root',

   templateUrl: './app.component.html',

   styleUrls: ['./app.component.css']

})

export class AppComponent {

   title = 'Angular 7';

   

   // declared array of months.

   months = ["January", "February", "March", "April", "May","June", "July", 

      "August", "September", "October", "November", "December"];

   

   isavailable = true; //variable is set to true

   myClickFunction(event) {

      //just added console.log which will display the event details in browser on click of the button.

      alert("Button is clicked");

      console.log(event);

   }

}

Ta thực hiện đoạn code và thực hiện run chương trình và có kết quả như sau:

Nếu bạn muốn nút button đẹp bạn thực hiện thêm css vào trong file app.component.css

button {

   background-color: #2B3BCF;

   border: none;

   color: white;

   padding: 10px 10px;

   text-align: center;

   text-decoration: none;

   display: inline-block;

   font-size: 20px;

}

Chúng ta thay đổi sự kiện chọn tháng trong code trên bằng sự kiện dropdown

app.component.html

<div style = "text-align:center">

   <h1>Welcome to {{title}}.</h1>

</div>

<div> Months :

   <select (change) = "changemonths($event)">

      <option *ngFor = "let i of months">{{i}}</option>

   </select>

</div>

<br/>

<div>

   <span *ngIf = "isavailable; 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>

<br/>

<button (click) = "myClickFunction($event)">

   Click Me

</button>

Trong file app.component.ts ta thực hiện hàm như sau:

changemonths(event) {

      console.log("Changed month from the Dropdown");

      console.log(event);

   }

Kết quả của chương trình trên như sau đây: