Angular ngClass I click event dla przełączania klasy

Zamiast tworzyć funkcję w pliku ts, możesz przełączyć zmienną z samego szablonu. Następnie można użyć zmiennej do zastosowania określonej klasy do elementu. Like so -

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

Więc gdy status jest prawdziwy, stosuje się sukces klasy. Gdy jest fałszywy Klasa niebezpieczeństwa jest stosowana.

To będzie działać bez dodatkowego kodu w pliku ts.

Angular6 używając renderer2 bez żadnych zmiennych i czystego szablonu:

Szablon:

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

W ts:

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

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

To też można umieścić w dyrektywie;)

ngClass powinien być owinięty w nawiasy kwadratowe, ponieważ jest to właściwość wiążąca. Spróbuj tego:

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

W składniku:

     //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;       
    }

Możemy również użyć ngClass, aby przypisać wiele klas CSS na podstawie wielu warunków, jak poniżej:

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

Więc normalnie tworzysz zmienną pomocniczą w klasie i przełączasz ją po kliknięciu i przywiązujesz do zmiennej powiązanie klasy. Coś w stylu:

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

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

Jeśli chcesz przełączyć tekst za pomocą przycisku przełączania.

HTMLfile, który używa bootstrap:

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

Plik TS:

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