Getting RGB color from *ngFor

Ionic Framework ionic-v3
1

I do have a list of colors holding integer values for red, green and blue. How do I color the text in those colors within a ion-item?

ion-list radio-group>
ion-item *ngFor=“let color of colors” >
ion-label>{{color.name}}
ion-radio style=“color:rgb(color.red,color.green,color.blue)” value=“{{color.id}}” [checked]=“color.active”>/ion-radio>
/ion-item>
/ion-list>

How to do that? I’m a little bit lost.

2

Hi there, I’m not really advance in this topics but as for [quote=“rosenrot, post:1, topic:92837”]
How do I color the text in those colors within an ion-item?
[/quote] you can simply do this:

: HTML :

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label [style.color]="textColor">
        <b> {{textColor}} </b>
      </ion-label>
      <ion-radio>

      </ion-radio>
    </ion-item>
  </ion-list>
</ion-content>

: TS :

export class HomePage {
      textColor: any;

  constructor(public navCtrl: NavController) {
        this.textColor = 'rgb(20,20,200)';
      }

}

Hope it helps.

P.S. RGB to HEX npm package

P.S. You can also fork these guys on GitHub and see how they are implementing https://github.com/inmagik/ionic-color-picker

1 Like
3

Thanks, I will try that. Actually is there a way without going through the .TS file?

I do have a list for objects containing colors and each ion-item should get the corresponding font-color. Going through the .TS file, I would have to create a temporary list of colors there. Do you see what I mean?

4

To be honest not really, maybe if you send an example of your .ts file to understand the objects with colors you mention, and I could help you out more!.

You can also read Component Styles from angular.io.

5

I can do later on. Basically I have a list of objects. This objects hold 3 colors, R G B. I put them in a ion-list with ngfor.

object1 {‘name’:‘bla’,‘r’:255,‘g’:0,‘b’:255}
object2 {‘name’:‘ble’,‘r’:255,‘g’:128,‘b’:255}
object3 {‘name’:‘blu’,‘r’:5,‘g’:0,‘b’:55}

objects {object1, object2, object3}

In the template I have a ion-list with ngfor
Holding a ion-item for each object.

I want the textcolor to be in the R G B color of the corresponding object

6

In the code that builds up this list of colors, how about adding a hex property that is constructed from the r/g/b values? That way the template can just say [style.color]="color.hex".

1 Like
7

Using SCSS classes with *ngif statements sound like a good start. If you really, really need an odd color picker in your app, there are plenty, if not tons of JS “classes” to fulfill your need. Just search color picker on google. But I would strongly disadvice this for a simple reason that stands in 3 words = responsive touch screen.

1 Like
8

Actually this seemed quite promising. I just went to use integers instead of hex. Exactly what I wanted.

[style.color]=“‘rgb(’+color.r+‘,’+color.g+‘,’+color.b+‘)’”

9

I’m not sure how SCSS classes could help me since I get random rgb’s from my objects. Could you elaborate a bit?