chips: set the background color of md-chip-template with dynamic data binding

[z3ntu]

Actual behavior:

• What is the issue?

I am trying to set the background color of an chip using ng-model.

• What is the expected behavior?

Make it look (kinda) like that:

CodePen or Steps to reproduce the issue:
CodePen Link

Angular Versions:

• Angular Version: 1.5.6
• Angular Material Version: 1.0.9
  Feature Request: Set background color of whole md-chip #6965 is a bit of the same thing.

[z3ntu]

bump? I really need this now.

[bastienJS]

bump! too. Please fix that my customer is irritated by the current implementation.

[masterkitano]

Hey guys! I'm not sure when will this be fixed, but I think this is a must feature. So while we wait, I decided to create a directive as a workaround. Feel free to use it.
The basic idea is to create an attribute directive and add into the md-chip-template tag.
This directive will search for the parent "md-chip" element of the template (this is the element we want to style).
The second step is to copy the md-chip-template class into the to the md-chip element.
finally, we remove the class from the template.
the result: we can pass custom classes to the md-chip directly from our md-chip-template tag class attribute:

<md-chip-template class="your-custom-chip" custom-chip>

HTML:

<md-chips ng-model="tags" placeholder="Add an item" readonly="true">
  <md-chip-template class="your-custom-chip" custom-chip>
    {{$chip}}
  </md-chip-template>
</md-chips>

js:

angular.module('your.module')
.directive('customChip', function(){
          return {
            restrict: 'EA',
            link: function(scope, elem, attrs) {
                var chipTemplateClass = attrs.class;
                elem.removeClass(chipTemplateClass);
                var mdChip = elem.parent().parent();
                mdChip.addClass(chipTemplateClass);
            }
        }
});

css

.your-custom-chip{
/* Here goes custom styles.*/
}

[z3ntu]

@masterkitano Is it possible to set a custom color which is from the model for each chip? But either way, thanks, I can probably modify it if it is not possible right now :)

[masterkitano]

@z3ntu woops, sorry, missed the most important part lol, it is possible to set custom color, you just have to acces your $chip from your directive's scope.
For example, setup your md-chips ng-model to an array with this similar structure:

chipsModel = [
            {
                name:"chip type 1",
                style_class: "class_with_custom_color_1"
            },
            {
                name:"chip type 2",
                style_class: "class_with_custom_color_2"
            },
        ];

then, inside your directive, you can access your scope, and since your scope is your md-chips object, you can directly access the chip object properties:

(inside directive link function)

mdChip.addClass(chipTemplateClass); /* here we add chip-template styles common to all chips */
mdChip.addClass(scope.$chip.style_class); /*here we add each specific $chip style classes, for example a class to different background-color.

this way you define each style as a property in your chips objects. Having this, you can do anything with your chips objects, for instance, pulling the array from database or Restful service with an Angular Service for instance.
this is an image from my actual project just to illustrate:

I hope I've explained myself 😆 Sorry for not providing a fiddle.js, but im in rush time! I'll put it here as soon as I can.

[bastienJS]

@EladBezalel Can you please make sure that the angular 2 version of md-chips will have this feature from the beginnig? Not that just the inner template of the chip is themeable/templateable.

[EladBezalel]

@jelbourn can you please have in mind this issue when developing md-chips in the future? :)

thanks !

[davidungio]

CodePen of @masterkitano's example: http://codepen.io/davidung/pen/QpPXzE

[poffo]

Following the same idea, without creating classes:

https://codepen.io/robson_poffo/pen/oedemL

[nicu-chiciuc]

@poffo The problem I'm having with this approach is that, I will find the color of a chip only after a later request to the server, so there should be a binding between the model and the color.

[nicu-chiciuc]

I solved this by adding a scope.$watch inside the link function.

[chriszrc]

For Material 2, the background-color works just fine, phew - angular/components#5466