- Angular Material Tutorial
- Angular Material - Home
- Angular Material - Overview
- Environment Setup
- Angular Material - Autocomplete
- Angular Material - Bottom Sheet
- Angular Material - Cards
- Angular Material - Widgets
- Angular Material - Layouts
- Angular Material - Inputs
- Angular Material - Icons
- Angular Material - Grids
- Angular Material - SideNav
- Angular Material - Fab Speed Dial
- Angular Material - Subheaders
- Angular Material - Swipe
- Angular Material - Switches
- Angular Material - Themes
- Angular Material - Toasts
- Angular Material - Typography
- Angular Material - Virtual Repeat
- Angular Material - WhiteFrame
- Angular Material Useful Resources
- Angular Material - Quick Guide
- Angular Material - Useful Resources
- Angular Material - Discussion
Angular Material - Chips
The md-chips, an Angular Directive, is used as a special component called Chip and can be used to represent a small set of information for example, a contact, tags etc. A custom template can be used to render the content of a chip. This can be achieved by specifying an md-chip-template element having the custom content as a child of md-chips.
Attributes
The following table lists out the parameters and description of the different attributes of md-chips.
Sr.No | Parameter & Description |
---|---|
1 | * ng-model Assignable angular expression to data-bind to. |
2 | * ng-model A model to bind the list of items to. |
3 | * md-transform-chip
An expression of form myFunction($chip) that when called expects one of the following return values −
|
4 | * md-require-match If true, and the chips template contains an autocomplete, only allows selection of pre-defined chips (i.e. you cannot add new ones). |
5 | placeholder Placeholder text that will be forwarded to the input. |
6 | secondary-placeholder Placeholder text that will be forwarded to the input, displayed when there is at least one item in the list. |
7 | readonly Disables list manipulation (deleting or adding list items), hiding the input and the delete buttons. |
8 | md-on-add An expression which will be called when a chip has been added. |
9 | md-on-remove An expression which will be called when a chip has been removed. |
10 | md-on-select An expression which will be called when a chip is selected. |
11 | delete-hint A string read by screen readers instructing users that pressing the delete key will remove the chip. |
12 | delete-button-label A label for the Delete button. Also hidden and read by screen readers. |
13 | md-separator-keys An array of key codes used to separate chips. |
Example
The following example shows the use of the md-chips directive and also the use of angular chips.
am_chips.htm
<html lang = "en"> <head> <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <style> .closeButton { position: relative; height: 24px; width: 24px; line-height: 30px; text-align: center; background: rgba(0, 0, 0, 0.3); border-radius: 50%; border: none; box-shadow: none; padding: 0; margin: 3px; transition: background 0.15s linear; display: block; } </style> <script language = "javascript"> angular .module('firstApplication', ['ngMaterial']) .controller('chipController', chipController); function chipController ($scope) { var self = this; self.readonly = false; // Lists of fruit names and Vegetable objects self.fruitNames = ['Apple', 'Banana', 'Orange']; self.roFruitNames = angular.copy(self.fruitNames); self.tags = []; self.vegObjs = [ { 'name' : 'Broccoli', 'type' : 'Brassica' }, { 'name' : 'Cabbage', 'type' : 'Brassica' }, { 'name' : 'Carrot', 'type' : 'Umbelliferous' } ]; self.newVeg = function(chip) { return { name: chip, type: 'unknown' }; }; } </script> </head> <body ng-app = "firstApplication"> <div ng-controller = "chipController as ctrl" layout = "column" ng-cloak> <md-chips ng-model = "ctrl.fruitNames" readonly = "ctrl.readonly"> </md-chips> <md-chips class = "custom-chips" ng-model = "ctrl.vegObjs" readonly = "ctrl.readonly" md-transform-chip = "ctrl.newVeg($chip)"> <md-chip-template> <span> <strong>[{{$index}}] {{$chip.name}}</strong> <em>({{$chip.type}})</em> </span> </md-chip-template> <button md-chip-remove class = "md-primary closeButton"> <md-icon md-svg-icon = "md-close"></md-icon> </button> </md-chips> <br/> <md-checkbox ng-model = "ctrl.readonly">Readonly</md-checkbox> </div> </body> </html>
Result
Verify the result.
To Continue Learning Please Login
Login with Google