Angular ngClass and click event for toggling class

by

This should work for you.

In .html:

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

In .ts:

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

More Related Contents:

  1. Difference between [ngClass] vs [class] binding
  2. Angular 2 innerHTML (click) binding
  3. Error:Unable to locate adb within SDK in Android Studio
  4. Angular 2 – View not updating after model changes
  5. Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found
  6. Property ‘map’ does not exist on type ‘Observable’
  7. Confirm password validation in Angular 6 [duplicate]
  8. Call child component method from parent class – Angular
  9. How to disable a input in angular2
  10. Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’ [duplicate]
  11. Angular file upload progress percentage [duplicate]
  12. Uncaught Error: Unexpected directive ‘MyComboBox’ imported by the module ‘AppModule’. Please add a @NgModule annotation
  13. Angular 2 – formControlName inside component
  14. : Unsafe value used in a resource URL context
  15. access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)
  16. Include assets when building angular library
  17. Angular 4 – Select default value in dropdown [Reactive Forms]
  18. How to uninstall/upgrade Angular CLI?
  19. How to get rid of the warning .ts file is part of the TypeScript compilation but it’s unused
  20. How can I create an observable with a delay
  21. Angular 2 Observable with multiple subscribers
  22. how to turn off differential loading in Angular v8?
  23. How to update / upgrade from Angular 4 to Angular 5+
  24. Where does DOM manipulation belong in Angular 2?
  25. Angular2: use [(ngModel)] with [ngModelOptions]=”{standalone: true}” to link to a reference to model’s property
  26. Angular 2 Reactive Forms trigger validation on submit
  27. How to manually set focus on mat-form-field in Angular 6
  28. What is the difference between fakeAsync and async in Angular testing?
  29. why lazy loaded module has to import commonModule? Angular 2
  30. How is Angular’s *ngFor loop implemented?

Leave a Comment