Sử dụng Directive ngClass

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>

Xin vui lòng bình luận bài viết dưới đây có hữu ích hay không? Nếu có nhiều bài viết khác mà anh chưa kịp cập nhật các em có thể bình luận kèm link liên kết anh sẽ cập nhật bài viết của mình nhé.

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments