Two-Way Binding: جادوی همگام‌سازی 🪄

Two-Way Binding ترکیبی از Property Binding و Event Binding است. این یعنی داده‌ها همزمان هم نمایش داده می‌شوند و هم با تغییر توسط کاربر، به‌روز می‌شوند.

چرا به آن نیاز داریم؟

فرض کنید یک فرم دارید. می‌خواهید وقتی کاربر نامش را تایپ می‌کند، همزمان متغیر username در کلاس شما آپدیت شود و اگر شما متغیر را در کد تغییر دادید، مقدار اینپوت هم تغییر کند. این کار با Two-Way Binding انجام می‌شود.

فعال‌سازی FormsModule:

برای استفاده از Two-Way Binding، باید ماژول FormsModule را به پروژه اضافه کنید.

1. فایل app.module.ts را باز کنید.

2. FormsModule را ایمپورت و به آرایه imports اضافه کنید:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 1. Import

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 2. Add to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

سینتکس "Banana in a Box":

سینتکس Two-Way Binding به شکل [(ngModel)] است که به آن "موز در جعبه" می‌گویند (چون پرانتز مثل موز و براکت مثل جعبه است)!

<input type="text" [(ngModel)]="username">
Hello {{ username }}!

// در TS
username = 'Initial Value';

حالا اگر در input تایپ کنید، متن پاراگراف همزمان تغییر می‌کند. جادویی است!