Dynamic classname inside ngClass in angular 2

by

Try

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

instead.

or

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

or even

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

will work but extra benefit of using ngClass is that it does not overwrite other classes that are added by any other method( eg: [class.xyz] directive or class attribute, etc.) as class does.

Angular 9 Update

The new compiler, Ivy, brings more clarity and predictability to what happens when there are different types of class-bindings on the same element. Read More about it here.

ngClass takes three types of input

  • Object: each key corresponds to a CSS class name, you can’t have dynamic keys, because key 'key' "key" are all same, and [key] is not supported AFAIK.
  • Array: can only contain list of classes, no conditions, although ternary operator works
  • String/ expression: just like normal class attribute

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Could not find module “@angular-devkit/build-angular”
  3. Angular how to get the multiple checkbox values?
  4. How to add font-awesome to Angular 2 + CLI project
  5. How to group data in Angular 2?
  6. How to watch for form changes in Angular
  7. Ionic 2 Form goes up when keyboard shows
  8. Angular EXCEPTION: No provider for Http
  9. *ngIf and local template variables
  10. ng: command not found while creating new project using angular-cli
  11. What is the difference between production and development mode in Angular2?
  12. Angular Reactive Forms with nested Form Arrays
  13. Set default option in mat-select
  14. Queries scale with the size of your result set, not the size of your data set
  15. Resetting a form in Angular 2 after submit
  16. Angular 2 router resolve with Observable
  17. Build Angular2 HTML and TypeScript to a single file
  18. Angular 2 – Does ngOnDestroy get called on refresh or just when navigate away from component?
  19. ng2 – dynamically creating a component based on a template
  20. Create a reusable FormGroup
  21. Merging http observables using forkjoin
  22. tap() isn’t triggered in RXJS Pipe
  23. What is the difference between declarations, providers, and import in NgModule?
  24. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  25. How to return observable from subscribe
  26. Limit input field to two decimal places – Angular 5
  27. How to create and download text/Json File with dynamic content using angular 2+
  28. Angular4 Load external html page in a div
  29. FormControl.detectchanges – why use distinctUntilChanged?
  30. How to use angular2 built-in date pipe in services and directives script files [duplicate]

Leave a Comment