Как добавить класс CSS, когда в событии click в angular 7 без использования ng-Class или ng-Style?

Question

Как добавить или удалить классы CSS к элементам HTML, когда я нажимаю на них в Angular7?Я хочу достичь этого без использования директив Ng-Style и Ng-Class.

Заранее спасибо.

Answer 1

Я думаю, что это то, чего вы хотите достичь (добавить и удалить класс по клику):

clicked(event) {
let oldClass = event.target.getAttribute('class');
if (oldClass == null) {
  oldClass = '';
  this.render.setElementAttribute(event.target, "class", oldClass + 'selected');
} else if (oldClass.includes('selected')) {
  oldClass = oldClass.replace('selected', '')
  this.render.setElementAttribute(event.target, "class", oldClass);
} else {
  this.render.setElementAttribute(event.target, "class", oldClass + ' selected');
}

Не забудьте import { Renderer } from '@angular/core'; и добавить constructor(private render: Renderer) { }

См. Демонстрацию Stackblitz

Подробнее о Renderer и .replace() или .replace()

Answer 2

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

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('class')
  elementClass = 'custom-theme';

  constructor() {
  }
}

тогда просто используйте его как

<div myDirective> </div>

---

Для непосредственного использования внутри компонента

import {Component, Renderer2} from '@angular/core';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent  {

  constructor(private renderer: Renderer) {}

  click(event) {
    renderer.addClass(event.target, 'popup');
  }
}