API reference for Angular Material chips
import {MatChipsModule} from '@angular/material/chips';
Directives
MatChipList
A material design chips component (named ChipList for its similarity to the List component).
Selector: mat-chip-list
Exported as: matChipListProperties
Name | Description |
---|---|
@Input('aria-orientation')
|
Orientation of the chip list. |
@Input()
|
A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned. |
@Input()
|
An object used to control when error messages are shown. |
@Input()
|
Whether the user should be allowed to select multiple chips. |
@Input()
|
Whether or not this chip list is selectable. When a chip list is not selectable, the selected states for all the chips inside the chip list are always ignored. |
@Output()
|
Event emitted when the selected chip list value has been changed by the user. |
|
Combined stream of all of the child chips' blur change events. |
|
Combined stream of all of the child chips' focus change events. |
|
Combined stream of all of the child chips' remove change events. |
|
Combined stream of all of the child chips' selection change events. |
|
The chip components contained within this chip list. |
|
|
|
Whether any chips or the matChipInput inside of this chip-list has focus. |
|
The ARIA role applied to the chip list. |
|
The array of selected chips inside chip list. |
|
Methods
focus | |
---|---|
Focuses the first non-disabled chip in this chip list, or the associated input when there are no eligible chips. |
|
Parameters | |
options? FocusOptions
|
|
registerInput | |
---|---|
Associates an HTML input element with this chip list. |
|
Parameters | |
inputElement MatChipTextControl
|
|
updateErrorState |
---|
MatChip
Material design styled Chip component. Used inside the MatChipList component.
Selector: mat-basic-chip [mat-basic-chip] mat-chip [mat-chip]
Exported as: matChipProperties
Name | Description |
---|---|
@Input()
|
Theme color palette for the component. |
@Input()
|
Whether ripples are disabled. |
@Input()
|
Whether the chip is disabled. |
@Input()
|
Determines whether or not the chip displays the remove styling and emits (removed) events. |
@Input()
|
Whether or not the chip is selectable. When a chip is not selectable, changes to its selected state are always ignored. By default a chip is selectable, and it becomes non-selectable if its parent chip list is not selectable. |
@Input()
|
Whether the chip is selected. |
@Input()
|
The value of the chip. Defaults to the content inside |
@Output()
|
Emitted when the chip is destroyed. |
@Output()
|
Emitted when a chip is to be removed. |
@Output()
|
Emitted when the chip is selected or deselected. |
|
The ARIA selected applied to the chip. |
|
The chip avatar |
|
Whether the chip list is selectable |
|
Default color to fall back to if no value is set. |
|
Tabindex to which to fall back to if no value is set. |
|
The chip's remove toggler. |
|
The chip's trailing icon. |
Methods
deselect | |
---|---|
Deselects the chip. |
focus | |
---|---|
Allows for programmatic focusing of the chip. |
remove | |
---|---|
Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or BACKSPACE keys are pressed. Informs any listeners of the removal request. Does not remove the chip from the DOM. |
select | |
---|---|
Selects the chip. |
selectViaInteraction | |
---|---|
Select this chip and emit selected event |
toggleSelected | |
---|---|
Toggles the current selected state of this chip. |
|
Parameters | |
isUserInput boolean = false
|
|
Returns | |
boolean
|
|
MatChipRemove
Applies proper (click) support and adds styling for use with the Material Design "cancel" icon available at https://material.io/icons/#ic_cancel.
Example:
`<mat-chip>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>`
You may use a custom icon, but you may need to override the mat-chip-remove
positioning
styles to properly center the icon within the chip.
Selector: [matChipRemove]
MatChipInput
Directive that adds chip-specific behaviors to an input element inside <mat-form-field>
.
May be placed inside or outside of an <mat-chip-list>
.
Selector: input[matChipInputFor]
Exported as: matChipInput, matChipInputForProperties
Name | Description |
---|---|
@Input('matChipInputAddOnBlur')
|
Whether or not the chipEnd event will be emitted when the input is blurred. |
@Input('matChipInputFor')
|
Register input for chip list |
@Input()
|
Whether the input is disabled. |
@Input()
|
Unique id for the input. |
@Input()
|
The input's placeholder text. |
@Input('matChipInputSeparatorKeyCodes')
|
The list of key codes that will trigger a chipEnd event. Defaults to |
@Output('matChipInputTokenEnd')
|
Emitted when a chip is to be added. |
|
Whether the input is empty. |
|
Whether the control is focused. |
Methods
focus | |
---|---|
Focuses the input. |
|
Parameters | |
options? FocusOptions
|
|
Classes
MatChipListChange
Change event object that is emitted when the chip list value has changed.
Properties
Name | Description |
---|---|
|
Chip list that emitted the event. |
|
Value of the chip list when the event was emitted. |
MatChipSelectionChange
Event object emitted by MatChip when selected or deselected.
Properties
Name | Description |
---|---|
|
Whether the selection change was a result of a user interaction. |
|
Whether the chip that emitted the event is selected. |
|
Reference to the chip that emitted the event. |
Interfaces
MatChipEvent
Represents an event fired on an individual mat-chip
.
Properties
Name | Description |
---|---|
|
The chip the event was fired on. |
MatChipInputEvent
Represents an input event on a matChipInput
.
Properties
Name | Description |
---|---|
|
The native |
|
The value of the input. |
MatChipsDefaultOptions
Default options, for the chips module, that can be overridden.
Properties
Name | Description |
---|---|
|
The list of key codes that will trigger a chipEnd event. |
Constants
MAT_CHIP_REMOVE
Injection token that can be used to reference instances of MatChipRemove
. It serves as
alternative token to the actual MatChipRemove
class which could cause unnecessary
retention of the class and its directive metadata.
const MAT_CHIP_REMOVE: InjectionToken<MatChipRemove>;
MAT_CHIP_AVATAR
Injection token that can be used to reference instances of MatChipAvatar
. It serves as
alternative token to the actual MatChipAvatar
class which could cause unnecessary
retention of the class and its directive metadata.
const MAT_CHIP_AVATAR: InjectionToken<MatChipAvatar>;
MAT_CHIP_TRAILING_ICON
Injection token that can be used to reference instances of MatChipTrailingIcon
. It serves as
alternative token to the actual MatChipTrailingIcon
class which could cause unnecessary
retention of the class and its directive metadata.
const MAT_CHIP_TRAILING_ICON: InjectionToken<MatChipTrailingIcon>;
MAT_CHIPS_DEFAULT_OPTIONS
Injection token to be used to override the default options for the chips module.
const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken<MatChipsDefaultOptions>;
API reference for Angular Material chips-testing
import {MatChipHarness} from '@angular/material/chips/testing';
Classes
MatChipHarness
extends
ComponentHarness
Harness for interacting with a standard Angular Material chip in tests.
Methods
async
getRemoveButton
|
|
---|---|
Gets the remove button inside of a chip. |
|
Parameters | |
filter ChipRemoveHarnessFilters = {}
|
Optionally filters which chips are included. |
Returns | |
Promise<MatChipRemoveHarness>
|
|
async
getText
|
|
---|---|
Gets the text of the chip. |
|
Returns | |
Promise<string>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDisabled
|
|
---|---|
Whether the chip is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
remove
|
|
---|---|
Removes the given chip. Only applies if it's removable. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
Deprecated
async
deselect
|
|
---|---|
Deselects the given chip. Only applies if it's selectable. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
Deprecated
async
isSelected
|
|
---|---|
Whether the chip is selected. |
|
Returns | |
Promise<boolean>
|
|
Deprecated
async
select
|
|
---|---|
Selects the given chip. Only applies if it's selectable. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
Deprecated
async
toggle
|
|
---|---|
Toggles the selected state of the given chip. Only applies if it's selectable. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
MatChipListHarness
extends
ComponentHarness
Harness for interacting with a standard chip list in tests.
Methods
async
getChips
|
|
---|---|
Gets the list of chips inside the chip list. |
|
Parameters | |
filter ChipHarnessFilters = {}
|
Optionally filters which chips are included. |
Returns | |
Promise<MatChipHarness[]>
|
|
async
getInput
|
|
---|---|
Gets the |
|
Parameters | |
filter ChipInputHarnessFilters = {}
|
Optionally filters which chip input is included. |
Returns | |
Promise<MatChipInputHarness>
|
|
async
getOrientation
|
|
---|---|
Gets whether the orientation of the chip list. |
|
Returns | |
Promise<'horizontal' | 'vertical'>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDisabled
|
|
---|---|
Gets whether the chip list is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isInvalid
|
|
---|---|
Gets whether the chip list is invalid. |
|
Returns | |
Promise<boolean>
|
|
async
isMultiple
|
|
---|---|
Gets whether the chip list is in multi selection mode. |
|
Returns | |
Promise<boolean>
|
|
async
isRequired
|
|
---|---|
Gets whether the chip list is required. |
|
Returns | |
Promise<boolean>
|
|
Deprecated
async
selectChips
|
|
---|---|
Selects a chip inside the chip list. |
|
Parameters | |
filter ChipHarnessFilters = {}
|
An optional filter to apply to the child chips. All the chips matching the filter will be selected. |
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
MatChipInputHarness
extends
ComponentHarness
Harness for interacting with a standard Material chip inputs in tests.
Methods
async
blur
|
|
---|---|
Blurs the input and returns a promise that indicates when the action is complete. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
focus
|
|
---|---|
Focuses the input and returns a promise that indicates when the action is complete. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getPlaceholder
|
|
---|---|
Gets the placeholder of the input. |
|
Returns | |
Promise<string>
|
|
async
getValue
|
|
---|---|
Gets the value of the input. |
|
Returns | |
Promise<string>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDisabled
|
|
---|---|
Whether the input is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isFocused
|
|
---|---|
Whether the input is focused. |
|
Returns | |
Promise<boolean>
|
|
async
isRequired
|
|
---|---|
Whether the input is required. |
|
Returns | |
Promise<boolean>
|
|
async
sendSeparatorKey
|
|
---|---|
Sends a chip separator key to the input element. |
|
Parameters | |
key string | TestKey
|
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
setValue
|
|
---|---|
Sets the value of the input. The value will be set by simulating keypresses that correspond to the given value. |
|
Parameters | |
newValue string
|
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
MatChipRemoveHarness
extends
ComponentHarness
Harness for interacting with a standard Material chip remove button in tests.
Methods
async
click
|
|
---|---|
Clicks the remove button. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
Interfaces
ChipHarnessFilters
A set of criteria that can be used to filter a list of MatChipHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose text matches the given value. |
Deprecated
|
Only find chip instances whose selected state matches the given value. |
ChipListHarnessFilters
A set of criteria that can be used to filter a list of MatChipListHarness
instances.
ChipInputHarnessFilters
A set of criteria that can be used to filter a list of MatChipListInputHarness
instances.
Properties
Name | Description |
---|---|
|
Filters based on the placeholder text of the input. |
|
Filters based on the value of the input. |
ChipRemoveHarnessFilters
A set of criteria that can be used to filter a list of MatChipRemoveHarness
instances.