Data Binding & Event Binding

Một component của Angular sẽ gồm:

• 1 decorator @Component được chứa các Meta data của Component
• 1 class chứa các properties và method của Component đó

// src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'ANGULAR ' + VERSION.major;
}

Để show các thuộc tính này lên UI, ta sử dụng toán tử nội suy (interpolation), title được gọi là 1 expression

<!-- src/app/app.component.html -->

<h1>Hello, {{ title }}</h1>

<aside> 💡 Điểm mạnh mẽ của Angular là nếu set các thuộc tính là private thì template sẽ không lấy được data đó ra theo tính chất OOP

</aside>

1. Data Binding

Sử dụng dấu square branket [] cho các thuộc tính cần binding data, phần nội dung nằm giữa double quote sẽ là 1 expression – user.name

Ta cần phân biệt 2 khái niệm:

• Property binding
• Attribute binding

Đây là ví dụ của Attribute binding

✅ Do!

<input type="text" [value]="user.name">

❌ Dont!

<input type="text" value="{{ user.name }}" />

Đây là ví dụ của Property binding

<h1>Hello, {{ title }}</h1>

2. Event binding

Cần phải khai báo 1 method handler bên trong Class của Component muốn bind Event

export class AppComponent {
  ...
  
  handleClick() {
    alert('Button clicked');
  }
}

Và bên dưới Template sẽ bind event onClick sẽ được xử lý bởi method handler vừa khai báo

<input type="text" [value]="user.name" />

3. Two ways binding

Ta cần import thêm FormsModule vào để có thể sử dụng được ngModel

// src/app/app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Định nghĩa thuộc tính email để bind thuộc tính này vào template

// src/app/app.component.ts

export class AppComponent {
	...
  email = '';
}

Bên trong Template ta sử dụng ngModel để bind dữ liệu

<!-- src/app/app.component.html -->

<p>{{ email }}</p>
<input type="text" [(ngModel)]="email">

Cách viết ở trên sẽ tương tự như cách viết ở dưới 🧑‍🎄

<p>{{ email }}</p>
<input type="text" [ngModel]="email" (ngModelChange)="email = $event.target.value">

4. Getter và Setter

Để tối ưu và tạo tính tái sử dụng với Getter, ta có thể dùng như sau:

Ở trong template ta có thể thấy ở đây sẽ có rất nhiều nơi sử dụng đường dẫn src là phép cộng string: ‘assets/’ + {tên file ảnh}

<img
  class="w-full h-full"
  [src]="'assets/' + cardData.image"
  [alt]="cardData.title"
/>

Nếu element này được sử dụng nhiều nơi thì sao? Nếu đường dẫn thay đổi, ta phải sửa nhiều vị trí. Thay vào đó, ta có thể sử dụng Getter

// Template HTML file
<img class="w-full h-full" [src]="imagePath" [alt]="cardData.title" />

// Component Class file
get imagePath() {
  return `assets/${this.cardData.image}`;
}