Методы переключения класса CSS с помощью директивы Angular ng-click

“Класс переключения углового ng-click” написан на английском языке. Это относится к определенной функциональности в платформе Angular, где директива ng-clickиспользуется для переключения класса CSS.

Вот несколько методов, которые вы можете использовать для достижения этой функциональности в Angular:

  1. Метод 1. Использование привязки свойств и директивы ngClass.
    В шаблоне HTML вы можете привязать свойство к классу, используя синтаксис [class.className].. Затем используйте директиву ngClassдля переключения свойства на основе условия. Например:

    <div [class.active]="isActive" (click)="isActive = !isActive">Toggle Class</div>
  2. Метод 2. Использование Renderer2:
    В свой компонент импортируйте класс Renderer2из @angular/core. Используйте методы addClassи removeClassдля переключения класса элемента. Например:

    import { Component, ElementRef, Renderer2 } from '@angular/core';
    @Component({
     selector: 'app-example',
     template: '<div #myDiv (click)="toggleClass(myDiv)">Toggle Class</div>'
    })
    export class ExampleComponent {
     constructor(private renderer: Renderer2) {}
     toggleClass(elementRef: ElementRef): void {
       this.renderer.addClass(elementRef.nativeElement, 'active');
       // Use removeClass instead of addClass to toggle off the class.
     }
    }
  3. Метод 3: использование ViewChild:
    В вашем компоненте используйте декоратор ViewChild, чтобы получить ссылку на элемент в вашем шаблоне, а затем переключите класс с помощью classListсвойство. Например:

    import { Component, ElementRef, ViewChild } from '@angular/core';
    @Component({
     selector: 'app-example',
     template: '<div #myDiv (click)="toggleClass()">Toggle Class</div>'
    })
    export class ExampleComponent {
     @ViewChild('myDiv') myDiv: ElementRef;
     toggleClass(): void {
       this.myDiv.nativeElement.classList.toggle('active');
     }
    }