Add Chips component

[ajoslin]

Specification: Chips

<material-chips>
  <material-chip ng-repeat="contact in contacts" active="contact.selected">
    <img ng-src="{{contact.img}}">
    <h2>{{contact.name}}</h2>
    <p>{{contact.email}}</p>
  </material-chip>
</material-chips>

Considerations:

• All chips inside are available in the menu.
• All chips that evaluate to active true will be rendered.

[Hendrixer]

what about the action for the x?
There would be two solutions I can think of:

1. Allow devs to use whatever icon they want for the action on the right if so then this could work

 <material-chips>
  <material-chip ng-repeat="contact in contacts" active="contact.selected">
    <img ng-src="{{contact.img}}">
    <h2>{{contact.name}}</h2>
    <p>{{contact.email}}</p>
    <md-icon class="md-chip-action" md-svg-icon="icon"  ng-click="action($index)"><md-icon>
  </material-chip>
</material-chips>

1. place an action directive on the material-chip directive

 <material-chips>
  <material-chip ng-repeat="contact in contacts" active="contact.selected"
   material-chip-action="action($index)">
    <img ng-src="{{contact.img}}">
    <h2>{{contact.name}}</h2>
    <p>{{contact.email}}</p>
  </material-chip>
</material-chips>

What do you think @ajoslin ?

[jeroenvheel]

when you delete a item its not the item that is deleted.

example: Basic usage
when you click delete[X] on (fruit:orange).
(fruit: apple) got deleted

[lyschoening]

Along the same lines (not making a new issue since this one is still open): If you re-enter an existing chip, all further chips entered after it will not show up until that chip is deleted.

1. add 'foo' (this works)
2. add 'foo' again (nothing happens)
3. add a few other chips (nothing happens)
4. delete 'foo': The second 'foo' as well as all other new chips appear.

[jeroenvheel]

nice works like a charm !