Binding trong Angular
Trong Angular, khi cần thay đổi các class của một phần tử dựa trên một điều kiện nào đó, chúng ta sử dụng class binding. Điều này cho phép chúng ta thêm hoặc xóa các class dựa trên giá trị của một biểu thức.
Ví dụ, nếu muốn thêm class tab-active khi một tab được chọn để hiển thị:
<div [class.tab-active]="isTabActive">some content</div>Khi isTabActive trả về true, class tab-active sẽ được thêm vào classList của phần tử <div>. Nếu isTabActive trả về false, class sẽ bị xóa đi.
Cú pháp [class] cũng có thể sử dụng với các dạng khác nhau của classExpr:
- String:
"my-class-1 my-class-2 my-class-3" - Array String:
['foo', 'bar'] - Object:
{ foo: true, bar: false }
Ví dụ, với Object, nếu foo là true, class foo sẽ được thêm vào, và nếu bar là false, class bar sẽ bị xóa.
Mặc dù chúng ta có thể sử dụng ngClass để thực hiện việc tương tự, nhưng hiện tại, không có sự khác biệt đáng kể so với cách sử dụng class binding trực tiếp. Việc sử dụng Class Binding được khuyến khích hơn việc sử dụng ngClass.
Style binding trong Angular
Style binding trong Angular cho phép bạn cài đặt các thuộc tính CSS trực tiếp trên một phần tử thông qua việc binding với các biểu thức trong component. Cú pháp của style binding bao gồm:
style.property=”expression”: Đây là cách cơ bản nhất để thiết lập một thuộc tính CSS cụ thể dựa trên một biểu thức. Ví dụ:
<div [style.width]="someValue"></div>[style.property.unit]=”expression”: Khi cần thiết lập các thuộc tính có đơn vị, chẳng hạn như chiều cao với đơn vị phần trăm. Ví dụ:
<div [style.height.%]="containerHeight"></div>[style]=”styleExpr”: Cho phép thiết lập nhiều thuộc tính CSS cùng lúc với giá trị từ biểu thức. Các loại giá trị có thể là string, array string hoặc object, như sau:
- String:
"width: 100%; height: 100%" - Array String:
['width', '100px'] - Object:
{ width: '100px', height: '100px' }
Tất cả những cách trên đều cho phép bạn định nghĩa các thuộc tính CSS dựa trên giá trị được tính toán từ biểu thức trong component.
Lưu ý: Khi sử dụng style binding, bạn có thể sử dụng cả kiểu camelCase hoặc dash-case cho các thuộc tính CSS, ví dụ: fontSize hoặc font-size đều là hợp lệ.
