mdChip : onDelete event on Chips

[tagazok]

Hi,
I have noticed there is a parameter onAppend parameter to the Chips component allowing me to know when a new element is added.
However, I can't see any way to get notified when an element is deleted from the Chips.
Would it be possible to have a similar parameter to be able to know when an element has been removed ?

[daleknauss]

This would be awesome. In the mean time you can just do this:
<md-chips> <button class="md-chip-remove" ng-click="tagsCtrl.tagDeleted()" md-chip-remove> <md-icon md-svg-icon="md-close"></md-icon> </button> </md-chips>

[tomacf]

If you need to get the chip to remove in your ng-click function, just use $chip as parameter

[tagazok]

Nice it works ! Thanks :)

[davthu]

Thats all nice and good. However, the Delete key will still delete chips and the click handler will not be executed. I had to use a watch on the chips collection to deal with it properly.

[smashercosmo]

Yes, for now the only way to invoke a callback on chips change is to watch length of chips's ngModel ((

[ghost]

@davthu can you post the solution to deal with the delete key ? i wnat to make only one of the chips unable to be deleted.

[davthu]

This is basicly what we do. Watching the chips collection for changes in size and then finding the the diff (the removeChip function is not included here for simplicity):

$scope.$watchCollection('chips', function(newVal, oldVal) {
  // A chip has been removed if oldVal is greater in size than newVal
  if (angular.isArray(oldVal) && oldVal.length > newVal.length) {
    // Find the item(s) in oldVal that does
    // not exist anymore in newVal.
    var diff = oldVal.filter(function(a) {
      return newVal.filter(function(b) {
        return a === b;
      }).length == 0
    });

    if (diff.length == 1) {
     removeChip(diff[0]);
    }
  }
});