Ngx-chips: [Feature Request] Bind background color to each tag

[bastienJS]

I'm submitting a ... (check one with "x")

[ X ] feature request

I am thrilled by your features :-)

Really everything I need you offer except one little feature which I already suggest for the ngJS 1.x md-chips!

The background-color for each tag inside my tags list come from the backend. I want to bind this background color dynamically. The theming does not help me.

I haven`t found any kind of color property I could bind to your tags component.

So I assume its not possible :/

I request that feature! :-)

[Gbuomprisco]

Hi @bastienJS,
at the moment it is not possible through the API. Though - I believe it is possible through theming.

This is how'd do it:

• First thing, you'd need to pass the color through the item's object
• Then, define a custom template, wrap the content in a div, and assign the background (or, better, a class?) to your div. Of course - this is based on the property passed through the item. You may want to also change the text color, and the delete icon color.
• Through theming, set the padding of the tag elements to 0, and adjust the right padding by assigning it to the div wrapping the template

Yeah ' it's a little bit hacky, but possible with some effort :) I may post an example soon if this is not clear enough

[bastienJS]

Hey, it is clear to me and it feels hacky because:

"and assign the background (or, better, a class?) to your div. "

That way I would have to hardcode all 16,7 mio colors from the input color chooser into pre-defined .css classes.

I do not want to do that :-)

Maybe I misunderstood you if so =>

Look this is how they look at the moment:

You think they can be colored that way?

[Gbuomprisco]

Yeah - a class could have been an option for a bunch of colors only. Still - if you pass the color through a variable and [ngStyle], you don't need to hardcode.

pointer: if you change the icon with , it will use the same as the tags without template.

not sure why the line-height is off too, but I guess you can manage that easily with CSS :)

Let me know if it works

[bastienJS]

Seems then I misunderstood you about the hardcoding of colors but...

"Yeah - a class could have been an option for a bunch of colors only. Still - if you pass the color through a variable and [ngStyle], you don't need to hardcode."

Sorry man but thoese tags-screenshot is from my own code ;-)

It will take a while until I have time to implement that color stuff as everything works here besides duplicated hacked code. I have 2 chips arrays...

But when I use your tags then I report here :-)

[bastienJS]

@Gbuomprisco "Yeah ' it's a little bit hacky, but possible with some effort :) I may post an example soon if this is not clear enough"

If you would have time for that sample I would be grateful :-)

I quickly manipulated the tag-element with background-color: orange;
That seems the way to go.

I just started with your tags component:

[Sathishchary]

what css code you are using to change the tags background-color ?. I have just now upgraded from 0.7.7 to 1.2.8. In 0.7.7 version I have changed the background color with deep keyword,
/deep/ .default tag:not(.tag--editing) { color:#fff !important ; background: blue !important; }
but this code is not working in ng2-tag-input 1.2.8 version, I am unable to change the background color with deep keyword .can you help me?

[Gbuomprisco]

Hi @Sathishchary - check out how to create custom themes in the readme

[Sathishchary]

Thanks @Gbuomprisco ,I have followed the readme and implemented . Now I am able to change the colors of tags.

[TheSorm]

So whats the easiest way to change the color now? Is it still to use the custom template with a div and set down the padding in a theme?

[Gbuomprisco]

I think so

[ratnam99]

Hi @Gbuomprisco, saw your comment

This is how'd do it:

First thing, you'd need to pass the color through the item's object
Then, define a custom template, wrap the content in a div, and assign the background (or, better, a class?) to your div. Of course - this is based on the property passed through the item. You may want to also change the text color, and the delete icon color.
Through theming, set the padding of the tag elements to 0, and adjust the right padding by assigning it to the div wrapping the template

I was not able to understand from this comment. Can you please send me a working example for it in Angular 4? It would be really appreciated.

Thanks in advance.

[teerarak]

I'm submitting a ... (check one with "x")

[ X ] feature request

I am thrilled by your features :-)

Really everything I need you offer except one little feature which I already suggest for the ngJS 1.x md-chips!

The background-color for each tag inside my tags list come from the backend. I want to bind this background color dynamically. The theming does not help me.

I haven`t found any kind of color property I could bind to your tags component.

So I assume its not possible :/

I request that feature! :-)

I want to Demo Code this case

[gdonaadulareddy]

@Gbuomprisco "Yeah ' it's a little bit hacky, but possible with some effort :) I may post an example soon if this is not clear enough"

If you would have time for that sample I would be grateful :-)

I quickly manipulated the tag-element with background-color: orange;
That seems the way to go.

I just started with your tags component:

Can you please share the code ?