2

I'm using Ionic Chip. But, the problem when I want to write color attribute with condition in [ngStyle] tag.

Works Fine

<ion-chip color="warning"> ABC Heading </ion-chip>

Problem

<ion-chip [ngStyle]="{'color': item.Valid == true ? 'success' : 'warning'}"> {{item.Valid == true ? 'Valid' : 'Invalid'}} </ion-chip>
Abhijit Mondal Abhi
  • 1,364
  • 4
  • 15
  • 34

1 Answers1

4

If you only want to change the color you can just bind the [color] property:

 <ion-chip [color]="item.isValid?'success':'warning'"> ABC Heading </ion-chip>

Note that using [ngStyle] with the color attribute will change the DOM elements colors, meaning the inner text color will change. It is not related to the ionic color attribute

Here's an example to illustrate

Jojofoulk
  • 2,127
  • 1
  • 7
  • 25
  • But, this way item.isValid is false all the time and warning shows. This is my line of code: {{item.Valid == true ? 'Valid' : 'Invalid'}} – Abhijit Mondal Abhi May 16 '19 at 07:26
  • I’ve updated the answer with a stackblitz example to show how you can use ngStyle – Jojofoulk May 16 '19 at 07:37
  • It works fine. I understood. But, if I want to use more that one attributes, then I have to write this individually? Such as, [color], [outline] etc. Or, is there any combined way for that? – Abhijit Mondal Abhi May 16 '19 at 07:46
  • Well using ngStyle you’d still have to type each property manually (like background-color, outline, etc...) the only difference is that you type them all in the ngStyle instead of different properties of the ion components (which is even less readable in my opinion) – Jojofoulk May 16 '19 at 07:54