GitHub-Mark-32px angular-chips

Angular-Chips is an angular based dynamic chip component.


It has five directives.

  • chips
  • chip-tmpl
  • remove-chip
  • chip-control
  • ng-model-control



Directive chips :

Param  @ng-model (mandatory) -> Array of String or array of Object.

“defer” attribute is mandatory when you pass an array of Objects.

Param  @render -> function. Optionally, you can pass call back method to modify the data given by the user before rendering.

“chips” is the root directive, which encloses all other directives. “chips” render the data from ng-model  . If the  ng-model  has five objects, it will render five chip-tmpl .


Directive chip-tmpl :

It’s a ngTransclude  directive. Add your custom html element here to design the chip.

Example: (ng-model with list of string)

Rendering data:

Example: (ng-model with list of object)

Note: “defer” attribute need to be added when you pass a list of Objects.

Rendering data:

chip.isLoading  to indicate the loading.

chip.isFailed  to indicate the rejected data $promise.reject


Directive remove-chip  (optional):

Param  @remove-chip(optional):

Call back function should return true or false.

When you click on this element, the chip is removed. Before deleting the chip, it calls a call back method and the chip data is accessed. After accessing the data, the chip gets removed if the returned value is true.

Pressing the ‘backspace’ or ‘delete’ key also removes the chip if it’s in focus.

This directive is optional, include this directive if you want the delete functionality.


Directive chip-control:

It controls the input element. Add it with input element like below

It will add the new chip when the enter key is pressed on the input element.


Directive ng-model-control:

It will add the chip when you add the new data to ng-model . Use this directive when it’s required to select the data from the drop-down, like select2 or bootstrap typeahead component.