Sử dụng Directive ngStyle trong Angular

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 ngStyle là như thế nào?

1. ngStyle là gì

Chúng ta sử dụng ngStyle có thể tạo nhiều thuộc tính css trong phần tử html. Các điều kiện sẽ được đánh giá lúc chương trình đang chạy và gán giá trị vào trong thẻ html.

• Cú pháp ngIf như sau:

1
<element [ngStyle]="{'styleNames': styleExp}">...</element>

• ngStyle là nơi chúng ta sử dụng các css như font-size, color, width, height như ví dụ dưới đây.

1
<some-element [ngStyle]="{'font-size': '20px'}">Set Font size to 20px</some-element>

2. ngStyle thay đổi style động

• Trong file component class ta có biến color như sau

1
color: string= 'red';

• Chúng ta sử dụng nó qua bên template html như sau

1
2
<input [(ngModel)]="color" /> 
<div [ngStyle]="{'color': color}">Change my color</div>

3. ngStyle nhiều thuộc tính

1
2
3
4
5
<p [ngStyle]="{'color': 'purple',
               'font-size': '20px',
               'font-weight': 'bold'}">
     Multiple styles
</p>

4. ngStyle sử dụng đối tượng

• Chúng ta tạo file StyleClass

1
2
3
4
5
class StyleClass {
   'color': string= 'blue';
   'font-size.px': number= 20;
   'font-weight': string= 'bold'; 
}

• Chúng ta tạo đối tượng StyleClass trong component class

1
styleClass: StyleClass = new StyleClass();

• Chúng ta sử dụng trong template html

1
<div [ngStyle]="styleClass">size & Color</div>

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments