Giới thiệu lại ngModel

NgModel là một directive trong Angular, nó giúp chúng ta thực hiện Two-way binding, tức là kết nối giữa dữ liệu và giao diện người dùng. Để sử dụng NgModel, trước hết chúng ta cần import FormsModule vào NgModule mà quản lý component của chúng ta. Nói một cách đơn giản, nếu bạn muốn sử dụng NgModel trong component, hãy đảm bảo rằng FormsModule đã được import vào NgModule quản lý component đó.

Ví dụ, nếu chúng ta có AppComponent được quản lý bởi AppModule, chúng ta sẽ import FormsModule vào AppModule như sau:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";

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

Sau khi đã import FormsModule, chúng ta có thể sử dụng NgModel trong template của component để thực hiện Two-way binding. Ví dụ, ở trong file app.component.html:

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

Ở đây, mỗi khi giá trị của input thay đổi, thẻ <p> sẽ hiển thị tên tương ứng và được đồng bộ.

Thực tế, cách viết ngắn gọn ở trên là viết tắt của property binding và event binding như sau:

<input type="text" [ngModel]="name" (ngModelChange)="name = $event" />

Điều này tương đương với việc property binding ngModel giữ giá trị của name, và event binding ngModelChange lắng nghe sự thay đổi và cập nhật giá trị name.

Nếu bạn muốn tạo một Two-way binding tùy chỉnh, bạn có thể tạo @Input và @Output với @Output có tên kết thúc bằng “Change”, ví dụ: value và valueChange.

Toggle Component support Two-way binding

Component Toggle mà bạn đã tạo có một cách tiếp cận thông minh để hỗ trợ Two-way binding. Như chúng ta đã thấy, nó sử dụng cách tiếp cận thông qua các @Input và @Output để tạo ra một cơ chế giống như ngModel. Điều này cho phép chúng ta sử dụng component Toggle một cách dễ dàng và linh hoạt trong việc thao tác với trạng thái checked.

Ở phần code TypeScript, chúng ta có hai decorator: @Input và @Output. @Input dùng để nhận giá trị checked từ bên ngoài component, và @Output được sử dụng để phát ra sự kiện khi trạng thái checked thay đổi.

Trong phần HTML của component Toggle, chúng ta sử dụng một div để tạo giao diện toggle. Class binding được sử dụng để điều chỉnh các trạng thái khác nhau của toggle dựa trên giá trị của checked.

Ngoài ra, còn có một phần CSS định dạng giao diện cho toggle, với hiệu ứng mượt mà khi chuyển đổi trạng thái.

Điểm đáng chú ý ở đây là việc sử dụng [(checked)]="checked" khi sử dụng component. Điều này cho phép chúng ta sử dụng Two-way binding một cách thuận tiện, tương tự như cú pháp ngModel. Bất cứ khi nào giá trị checked thay đổi trong component Toggle, nó sẽ tự động cập nhật ở nơi sử dụng component đó.

Nhờ vào cách này, component Toggle trở nên dễ sử dụng và linh hoạt trong việc làm việc với trạng thái checked.