Angularда стилларни динамик ўзгартириш

ngClass ва ngStyle директивалари ёрдамида элементларга ифодаларни боглаш мумкин, бу бизнинг стилларимиз динамик ўзгаришига олиб келади.

Компонент классасининг active xоссаси ёрдамида матн йўқолсин ёки кўрсатилсин:

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

Бунга toggle функциясини ёзамиз, у ўзгармас равишда бу хоссани ўчириб-ёкиб туради:

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

Компонентнинг CSS файлида куйидаги стилни берамиз:

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

Компонент шаблонида див яратамиз ва унга hidden CSS классини қўшамиз, у компонент классасидан active xоссасига қараб ўчади ёки ёнади:

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

Тугмача яратамиз, уни босганда toggle методи чақирилади ва бизнинг компонентимиз кўринади ёки йўқолади:

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