Angular ngClass и событие click для переключения класса

Это должно сработать для вас.

В .html:

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

In .ts:

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}

Вместо того, чтобы создавать функцию в файле ts, вы можете переключать переменную из самого шаблона. Затем вы можете использовать переменную, чтобы применить к элементу определенный класс. Вот так-

<div (click)="status=!status"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

Итак, когда статус истинен, применяется успех класса. Когда он ложный, применяется класс опасности.

Это будет работать без дополнительного кода в файле ts.

Angular6 с использованием renderer2 без каких-либо переменных и чистого шаблона:

шаблон:

<div (click)="toggleClass($event,'testClass')"></div>

in ts:

toggleClass(event: any, className: string) {
  const hasClass = event.target.classList.contains(className);

  if(hasClass) {
    this.renderer.removeClass(event.target, className);
  } else {
    this.renderer.addClass(event.target, className);
  }
}

Это тоже можно было бы поместить в директиву;)

ngClass следует заключить в квадратные скобки, поскольку это привязка свойства. Попробуй это:

<div class="my_class" (click)="clickEvent($event)"  [ngClass]="{'active': toggle}">                
     Some content
</div>

В вашем компоненте:

     //define the toogle property
     private toggle : boolean = false;

    //define your method
    clickEvent(event){
       //if you just want to toggle the class; change toggle variable.
       this.toggle = !this.toggle;       
    }

Надеюсь, это поможет.

Если вы ищете только HTML-способ сделать это в angular ...

<div #myDiv class="my_class" (click)="myDiv.classList.toggle('active')">
  Some content
</div>

Важный бит - это #myDiv часть.

Это ссылка на узел HTML, поэтому вы можете использовать эту переменную, как если бы она была присвоена document.querySelector('.my_class')

ПРИМЕЧАНИЕ. эта переменная зависит от области видимости, поэтому вы можете использовать ее в *ngFor операторах.

Мы также можем использовать ngClass для назначения нескольких классов CSS на основе нескольких условий, как показано ниже:

<div
  [ngClass]="{
  'class-name': trueCondition,
  'other-class': !trueCondition
}"
></div>

Если вы хотите переключить текст с помощью переключателя.

HTML-файл с использованием начальной загрузки:

<input class="btn" (click)="muteStream()"  type="button"
          [ngClass]="status ? 'btn-success' : 'btn-danger'" 
          [value]="status ? 'unmute' : 'mute'"/>

TS файл:

muteStream() {
   this.status = !this.status;
}

Поэтому обычно вы должны создать резервную переменную в классе, переключить ее щелчком и привязать привязку класса к переменной. Что-то вроде:

@Component(
    selector:'foo',
    template:`<a (click)="onClick()"
                         [class.selected]="wasClicked">Link</a>
    `)
export class MyComponent {
    wasClicked = false;

    onClick() {
        this.wasClicked= !this.wasClicked;
    }
}

Вы можете попробовать это.

HTML.

<button *ngFor="let color of colors; let index=index" class="example1" 
        (click)="selectColor(index)" [class.choose__color]="viewMode == index">
    <mat-icon>fiber_manual_record</mat-icon>
</button>

css.

.example1:hover {
    border-bottom: 2px solid black;
}

.choose__color {
     border-bottom: 2px solid black;
}

ts.

selectColor(index: any) {
    this.viewMode = index;
}