Dynamically change color in Ionic 2

Question

Based on some condition, I am trying to set the color value of an element.

So, in my TS file, I have taken a variable called color that I am setting as

  if(this.value>0) this.color="#ffc000!important";

In my HTML file, I have tried setting this color in the following ways

<ion-icon name="notifications" [style.color]="color">

as well as using ngstyle

<ion-icon name="notifications" [ngStyle]="{'color': color}">

None of these are working. What am I doing wrong or what is the right way to do this?

Answer 1

<ion-icon name="notifications" [color]="color">

希望这有效

Answer 2

.HTML file Code to set background color

<ion-col col-12 *ngFor="let item of newsArray" class="dir-col" >
          <div class="cell-dot" [ngStyle]="{'background-color': item.colorCode}"> 
     </div>
</ion-col>

.ts file code to set dynamic color code from web service

  this.totalSearchRecord = data["TotalNewsRecords"]
      for (let news of data["records"]) {
        this.newsArray.push({
          newsId: this.serviceProvider.checkNull(news['id']),
          newsTitle: this.serviceProvider.checkNull(news['PressReleaseTitle']),
          newsDes: this.serviceProvider.checkNull(news['PressReleaseShortDes']),
          newsDate: this.serviceProvider.checkNull(news['PressReleaseDate']),
          newsMonth: this.serviceProvider.checkNull(news['PressReleaseMonth']),
          alias: this.serviceProvider.checkNull(news['Alias']),
          colorCode:'#FFFFFF',
        });
      }

Answer 3

Reference

when we pass the name of the icon we want to use in the name property ionic adds the class for that icon based on the mode. For example, if you pass heart:

<ion-icon name="heart"></ion-icon>

on iOS it would be:

<ion-icon class="ion-ios-heart"></ion-icon>

and for material design mode it would be:

<ion-icon class="ion-md-heart"></ion-icon>

So that we can add CSS properties to them with the class name.

In your scss file,

.ion-md-heart{
        color: red !important;
    }
.ion-ios-heart{
        color: red !important;
    }

Hope this helps, it works for me.

Answer 4

In Angular 2 / Ionic 2 an easy way to change the color of objects is using the theme/variables.scss file.

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  my-special-color:   #ffcc55,
);

Now to change a color dynamically in a ionic2 page you can do this by binding the color to variable in the HTML part

<button [color]="myBtnColor">MyButton</button>

And in your TypeScript part

import { ..., ChangeDetectorRef, ... } from '@angular/core';
...
export class MyComponent {
  myBtnColor = "secondary"
  constructor(private changeDetectorRef:ChangeDetectorRef) {}
  ...
  function changeColorDynamicaly() {
    myBtnColor = "my-special-color";
    this.changeDetectorRef.detectChanges();
  }
  ...
}

In my case the ChangeDetectorRef is used to see actual changes reflected in the view. The view is invalidated to be updated.