Javatpoint Logo
Javatpoint Logo

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:

Angular Material Contact Chips

Example 2:

app.module.html

app.component.css

app.component.ts

Output:

Angular Material Contact Chips




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA