Угловой добавить класс к компоненту из файла css компонента

Question

Я хочу добавить класс к своему компоненту, когда я нажимаю кнопку.Поэтому я делаю это с Renderer2 следующим образом:

this.renderer.addClass(this.elRef.nativeElement, 'photo-removing');

Класс применяется только тогда, когда я добавляю класс css в глобальный файл css.Он не работает, когда я добавляю его в компонентный файл css .Любая идея, почему это происходит?

Обновление: Вот мой компонент HTML:

<div *ngIf="imgMainUrl">
    <img
        [src]="imgMainUrl"
        [style.width.px]="width" [style.height.px]="height"
        [ngClass]="{ 'img-radius' : rounded }"
    >
    <i
        [pTooltip]="tooltipTxt" [tooltipPosition]="tooltipPosition"
        class="icon-close close-btn"
        (click)="removePhoto()">
    </i>
</div>

И CSS:

.photo-removing {
    opacity: 0.4;
    border:1px solid red;
}

Answer 1

Это прекрасный пример использования директивы [ngClass].

Если вы просто используете кнопку для переключения некоторой переменной, вы можете сделать это ...

ВВаш файл component.ts:

public clicked: boolean = false;

click() {
     this.clicked ? false : true;
}

В вашем файле component.html:

<button (click)="click()">Set to {{!clicked}}</button>

<div [ngClass]="{'your-class' : clicked}"></div>

Если вы действительно хотите использовать рендерер, вам нужно установить этот код в своем угловом коде.app:

encapsulation: ViewEncapsulation.None.

Устанавливая для этого значения значение None, вы указываете Angular не инкапсулировать ваши представления.Таким образом, стандартные правила области видимости, изоляции и защиты для стиля не будут применяться.Итак, Angular добавляет CSS к глобальным стилям.По сути это то же самое, что и вставка стилей компонента в HTML.

https://angular.io/api/core/ViewEncapsulation

Answer 2

Попробуйте: -

Stackblitz Link: - https://stackblitz.com/edit/renderer2-example-2-wdz4og?file=src/app/app.component.css

.html

<div #test *ngIf="imgMainUrl">
  test
    <img
        [src]="imgMainUrl"
        [style.width.px]="width" [style.height.px]="height"
        [ngClass]="{ 'img-radius' : rounded }"
    >
<button type="button" (click)="addClass()">asasas</button>

</div>

.ts

  @ViewChild('test') test: ElementRef;
  imgMainUrl = true;
  constructor(private renderer: Renderer2) { }
  addClass() {
    this.renderer.addClass(this.test.nativeElement, 'photo-removing');
  }

Answer 3

Вы можете использовать [ngClass] с *ngIf вместо

В .html:

<button (click)="buttonClicked()"></button>

<div [ngClass]={checker === true ? 'photo-removing' : ''}></div>

И в .ts файле:

export class Home{

  checker:boolean = false;
  constructor(){}


  buttonClicked() {
   this.checker = !this.checker;
  }
}