Ràng buộc dữ liệu hai chiều trong Angular

Trong Angular, bạn có thể làm sao cho khi nhập văn bản vào input, văn bản đó tự động được đưa vào thuộc tính của class. Điều này được gọi là ràng buộc dữ liệu hai chiều.

Để ràng buộc như vậy hoạt động, trước tiên cần phải bật nó lên. Để làm điều này, trong file component, hãy import FormsModule:

import { FormsModule } from '@angular/forms';

Và sau đó thêm vào thuộc tính imports của decorator @Component:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

Sau đó, ràng buộc dữ liệu hai chiều sẽ được bật và chúng ta có thể sử dụng nó. Hãy cùng thực hiện.

Trước tiên, hãy khai báo một thuộc tính class mà chúng ta sau đó sẽ áp dụng ràng buộc hai chiều:

export class AppComponent {
	public text: string = '';
}

Giả sử chúng ta có một div và một input. Giả sử trong div hiển thị một thuộc tính nào đó của class:

<div>
	{{ text }}
</div>
<input>

Hãy ràng buộc thuộc tính text của chúng ta với sự thay đổi của input. Để làm điều này, trong input cần viết directive đặc biệt [(ngModel)], giá trị của nó nên được chỉ định là thuộc tính của class chúng ta:

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

Bây giờ, nếu chạy code và bắt đầu nhập văn bản vào input, văn bản đó ngay lập tức sẽ bắt đầu hiển thị trong div.

Cho một input và một đoạn văn. Trong input hiển thị một số. Hãy làm sao để khi nhập số vào input, trong đoạn văn hiển thị bình phương của số đó.

Cho hai input và một đoạn văn. Các số được nhập vào input. Hãy làm sao để trong đoạn văn hiển thị tổng của các số đã nhập.