web-dev-qa-db-fra.com

Changer dynamiquement de couleur dans Ionic 2

En fonction de certaines conditions, j'essaie de définir la valeur de couleur d'un élément.

Donc, dans mon fichier TS, j'ai pris une variable appelée couleur que je suis en train de définir comme

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

Dans mon fichier HTML, j'ai essayé de définir cette couleur comme suit:

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

ainsi que l'utilisation de ngstyle

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

Aucun d'entre eux ne fonctionne. Qu'est-ce que je fais mal ou quelle est la bonne façon de faire cela?

angularstylesionic2
4
user2739655

Fichier .HTML Code permettant de définir la couleur d'arrière-plan  

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

Code de fichier .ts pour définir un code de couleur dynamique à partir du service Web 

  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',
        });
      }
2
jeetendra_coder
<ion-icon name="notifications" [color]="color">

J'espère que ça marche

1
iTR

Référence

lorsque nous passons le nom de l'icône que nous voulons utiliser dans la propriété name ionic ajoute la classe de cette icône en fonction du mode. Par exemple, si vous passez le coeur:

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

sur iOS ce serait:

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

et pour le mode de conception matérielle, il s'agirait de:

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

Pour que nous puissions leur ajouter des propriétés CSS avec le nom de la classe.

Dans votre fichier scss,

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

J'espère que cela aide, cela fonctionne pour moi.

0
Aravindh Gopi

Dans Angular 2/Ionic 2, un moyen simple de changer la couleur des objets consiste à utiliser le fichier theme/variables.scss . 

// 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,
);

Maintenant, pour changer une couleur de manière dynamique dans une page ionic2, vous pouvez le faire en liant la couleur à une variable dans la partie HTML 

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

Et dans votre partie TypeScript 

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

Dans mon cas, ChangeDetectorRef est utilisé pour voir les modifications réelles reflétées dans la vue. La vue est invalidée pour être mise à jour.

0
Olivier de Jonge