Angular2 dynamic change CSS property

by

1) Using inline styles 

<div [style.color]="myDynamicColor">

2) Use multiple CSS classes mapping to what you want and switch classes like:

 /* CSS */
 .theme { /* any shared styles */ }
 .theme.blue { color: blue; }
 .theme.red { color: red; }

 /* Template */
 <div class="theme" [ngClass]="{blue: isBlue, red: isRed}">
 <div class="theme" [class.blue]="isBlue">

Code samples from: https://angular.io/cheatsheet

More info on ngClass directive : https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

More Related Contents:

  1. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 5 Service to read local .json file
  6. Angular 2: Two backend service calls on success of first service
  7. Angular: Can’t find Promise, Map, Set and Iterator
  8. Wait for multiple promises to finish
  9. Angular2 component’s “this” is undefined when executing callback function
  10. Angular 2: Callback when ngFor has finished
  11. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  12. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  13. How to subscribe to an event on a service in Angular2?
  14. Angular 2 pipe that transforms JSON object to pretty-printed JSON
  15. Angular 6 – process is not defined when trying to serve application
  16. Angular url plus sign converting to space
  17. How to Pass data from child to parent component Angular
  18. ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’
  19. How to ‘wait’ for two observables in RxJS
  20. Generate dynamic css based on variables angular
  21. How to use onBlur event on Angular2?
  22. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  23. Angular 2 Hover event
  24. angular 2 access ng-content within component
  25. How to implement a global loader in Angular
  26. How to use jQuery UI with Angular 2
  27. Is it a bad practice to use jQuery in Angular? [closed]
  28. How to Inject Angular2 Http service into es6/7 Class?
  29. Angular 2 calling jQuery after rendering elements – after consuming API
  30. Angular 4: How to read content of text file with HTTPClient

Leave a Comment