Angular 2 простая директива для переключения класса

Question

У меня есть такая структура в html

<div class="col-8">
    text
</div>
<div class="col-4">
    text
</div>

Мне нужно создать простую директиву в моем app.component.ts , которая будет при нажатии на элемент переключаться икласс объявлений col-12 , чем HTML будет выглядеть так:

<div class="col-8 col-12">
    text
</div>
<div class="col-4 col-12">
    text
</div>

Извините, у меня сейчас нет ничего в коде, но мне нужна помощь, чтобы начать работу

Answer 1

Используйте декораторы HostBinding для привязки свойства

customDirective.ts

import { Directive,HostBinding,HostListener } from '@angular/core';

@Directive({
  selector: '[appDynamicClass]'
})
export class DynamicClassDirective {

@HostBinding('class.col-12') isActive=false;

  constructor() { }

  @HostListener('click',['$event']) onClick(){
    console.log('clicked');
    this.isActive=!this.isActive;
  }

}

component.ts

<button class="col-2" appDynamicClass>
  Click
</button>

Пример: https://stackblitz.com/edit/hostbinfing

Answer 2

Зачем вам нужна директива, мы можем добиться этого с помощью атрибута ngClass.

<div class="col-8" (click)="handleClick()" [ngClass]="{'col-12' : icClick}">
    text
</div>
<div class="col-4" (click)="handleClick()" [ngClass]="{'col-12' : icClick}">
    text
</div>

Компонент

icClick = false;
handleClick(){
   this.icClick = !this.icClick;
}