Angular

Sử dụng Directive ngClass trong Angular

nguyen.le , 15 min read

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người cách tạo ngClass là như thế nào?

1. ngClass là gì

Chúng ta sử dụng ngClass để thêm hay xoá một css trong phần tử html.

Cú pháp ngIf như sau

1
<element [ngClass]="expression">...</element>

element : chính là phần tử của web
expression : điều kiện và css được thêm vào

2. Ví dụ ngClass

Ví dụ ta có một số thuộc tính css được định nghĩa trong file component app.component.css như sau

1
2
.red { color: red; }
.size20 { font-size: 20px; }

Tiếp đến ta sẽ sử dụng nó trong file template html như sau

1
<div [ngClass]="'red size20'"> Red Text with Size 20px </div>

3. ngClass với mảng

Chúng ta có thể khai báo dạng mảng css trong file template html như sau

1
<div [ngClass]="['red','size20']">Red Text with Size 20px </div>

4. Cập nhật giá trị css động

Ví dụ trong file component class ta có biến cssStringVar. Sau đó ta gán nó qua bên template html, như vậy khi giá trị cssStringVar thay đổi thì nó sẽ cập nhật giá trị đó bên template html

Ta có file component class như sau

1
cssStringVar: string= 'red size20';

Ta sẽ binding giá trị cssStringVar qua file template

1
2
3
<div class="row">     
   <div [ngClass]="cssStringVar">Red Text with Size 20px : from component     </div> 
</div>

5. Cập nhật giá trị css động với array

1
cssArray:string[]=['red','size20'];

Ta sẽ binding giá trị cssArray qua file template

1
2
3
4
5
<div class="row">
  <div [ngClass]="cssArray">
    Red Text with Size 20px  : from CSS Array
  </div>
</div>

6. Cập nhật giá trị css động với đối tượng

Ví dụ ta có class tên là CssClass

1
2
3
4
class CssClass {
  red: boolean= true;
  size20: boolean= true; 
}

Trong file component class ta tạo đối tượng CssClass

1
cssClass: CssClass = new CssClass();

Ta truyền qua file template html

1
2
3
<div class="row">     
  <div [ngClass]="cssClass"> Red Text with Size 20px : from component as object</div> 
</div>