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 đề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>

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