Thay đổi kiểu dáng động trong Angular

Với các directives ngClass và ngStyle, bạn có thể liên kết các biểu thức với các phần tử, nhờ đó kiểu dáng của chúng ta sẽ thay đổi một cách linh hoạt.

Hãy làm sao để văn bản được ẩn đi hoặc hiển thị bằng thuộc tính active của lớp component:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Để làm điều này, chúng ta viết hàm toggle, hàm này sẽ luân phiên bật hoặc tắt thuộc tính này:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Trong file CSS của component, đặt kiểu dáng sau cho lớp:

app/app.component.css.hidden {
  display: none;
}

Trong template của component, tạo một div, và thêm cho nó lớp CSS hidden, lớp này sẽ được bật hoặc tắt tùy thuộc vào thuộc tính active từ lớp component:

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

Cũng tạo một nút bấm, khi nhấn vào nó sẽ gọi phương thức toggle, hiển thị hoặc ẩn component của chúng ta:

app/app.component.html<button (click)="toggle()">
  toggle
</button>