89
Angular Material Contact Chips
The Angular Directive md-contact-chips, is an input control that is built on MD-chips and uses the md-auto-complete element. The contact chip component has an expression that lists the contacts. The user selects one of it and then adds it to the list of available chips.
The <md-contact-chips> is an input component based on md-chips. It is used mainly for labels.
Attributes
The table lists the parameters and descriptions of various properties of md-contact-chips.
S.No | Parameter | Description |
---|---|---|
1 | * ng-model | It is used to bind a list of items. |
2 | * md-contacts | This is expected to return from a contact matching test, $ query. |
3 | * md-contact-name | * md-contact-name is the field name of the contact object that represents the contact’s name. |
4 | * md-contact-email | The contact object’s field name represents the contact’s email address. |
5 | * md-contact-image | The contact object’s field name represents the contact’s image. |
6 | placeholder | Placeholder text is sent for input. |
7 | secondary-placeholder | If there is at least one item in the list, the placeholder text will be sent to the input displayed. |
8 | filter-selected | It is used to filter selected contacts from the list of suggestions in auto-complete. |
Example 1:
The example shows the use of the md-contact-chips instruction and the uses of angular contact chips.
app.module.ts
app.component.html
Output:
Example 2:
app.module.html
app.component.css
app.component.ts
Output:
Next TopicAngular Material Stepper