import {MatChipsModule} from '@angular/material/chips';
MatChip
Material design styled Chip base component. Used inside the MatChipSet component.
Extended by MatChipOption and MatChipRow for different interaction patterns.
Selector: mat-basic-chip [mat-basic-chip] mat-chip [mat-chip]
Exported as: matChipName | Description |
---|---|
@Input('aria-description')
|
ARIA description for the content of the chip. |
@Input('aria-label')
|
ARIA label for the content of the chip. |
@Input()
|
Theme color of the chip. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/chips/styling. For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input({ transform: booleanAttribute })
|
Whether the ripple effect is disabled or not. |
@Input({ transform: booleanAttribute })
|
Whether the chip is disabled. |
@Input({ transform: booleanAttribute })
|
Colors the chip for emphasis as if it were selected. |
@Input()
|
A unique id for the chip. If none is supplied, it will be auto-generated. |
@Input({ transform: booleanAttribute })
|
Determines whether or not the chip displays the remove styling and emits (removed) events. |
@Input()
|
Role for the root of the chip. |
@Input()
|
The value of the chip. Defaults to the content inside
the |
@Output()
|
Emitted when the chip is destroyed. |
@Output()
|
Emitted when a chip is to be removed. |
|
The unstyled chip selector for this component. |
|
The chip's leading edit icon. |
|
The chip's leading icon. |
|
Action receiving the primary set of user interactions. |
|
The chip's trailing remove icon. |
|
The chip's trailing icon. |
focus | |
---|---|
Allows for programmatic focusing of the chip. |
remove | |
---|---|
Allows for programmatic removal of the chip. Informs any listeners of the removal request. Does not remove the chip from the DOM. |
MatChipOption
extends
MatChip
An extension of the MatChip component that supports chip selection. Used with MatChipListbox.
Unlike other chips, the user can focus on disabled chip options inside a MatChipListbox. The user cannot click disabled chips.
Selector: mat-basic-chip-option [mat-basic-chip-option] mat-chip-option [mat-chip-option]
Name | Description |
---|---|
@Input('aria-description')
|
ARIA description for the content of the chip. |
@Input('aria-label')
|
ARIA label for the content of the chip. |
@Input()
|
Theme color of the chip. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/chips/styling. For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input({ transform: booleanAttribute })
|
Whether the ripple effect is disabled or not. |
@Input({ transform: booleanAttribute })
|
Whether the chip is disabled. |
@Input({ transform: booleanAttribute })
|
Colors the chip for emphasis as if it were selected. |
@Input()
|
A unique id for the chip. If none is supplied, it will be auto-generated. |
@Input({ transform: booleanAttribute })
|
Determines whether or not the chip displays the remove styling and emits (removed) events. |
@Input()
|
Role for the root of the chip. |
@Input({ transform: booleanAttribute })
|
Whether or not the chip is selectable. When a chip is not selectable, changes to its selected state are always ignored. By default an option chip is selectable, and it becomes non-selectable if its parent chip list is not selectable. |
@Input({ transform: booleanAttribute })
|
Whether the chip is selected. |
@Input()
|
The value of the chip. Defaults to the content inside
the |
@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. Conforms to WAI ARIA best practices for listbox interaction patterns. From WAI ARIA Listbox authoring practices guide: "If any options are selected, each selected option has either aria-selected or aria-checked set to true. All options that are selectable but not selected have either aria-selected or aria-checked set to false." Set |
|
The unstyled chip selector for this component. |
|
Whether the chip list is selectable. |
|
The chip's leading edit icon. |
|
The chip's leading icon. |
|
Action receiving the primary set of user interactions. |
|
The chip's trailing remove icon. |
|
The chip's trailing icon. |
deselect | |
---|---|
Deselects the chip. |
focus | |
---|---|
Allows for programmatic focusing of the chip. |
remove | |
---|---|
Allows for programmatic removal of the chip. Informs any listeners of the removal request. Does not remove the chip from the DOM. |
select | |
---|---|
Selects the chip. |
selectViaInteraction | |
---|---|
Selects this chip and emits userInputSelection event |
toggleSelected | |
---|---|
Toggles the current selected state of this chip. |
|
Parameters | |
isUserInput boolean = false
|
|
Returns | |
boolean
|
|
MatChipRow
extends
MatChip
An extension of the MatChip component used with MatChipGrid and the matChipInputFor directive.
Selector: mat-chip-row [mat-chip-row] mat-basic-chip-row [mat-basic-chip-row]
Name | Description |
---|---|
@Input('aria-description')
|
ARIA description for the content of the chip. |
@Input('aria-label')
|
ARIA label for the content of the chip. |
@Input()
|
Theme color of the chip. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/chips/styling. For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input({ transform: booleanAttribute })
|
Whether the ripple effect is disabled or not. |
@Input({ transform: booleanAttribute })
|
Whether the chip is disabled. |
@Input()
|
|
@Input({ transform: booleanAttribute })
|
Colors the chip for emphasis as if it were selected. |
@Input()
|
A unique id for the chip. If none is supplied, it will be auto-generated. |
@Input({ transform: booleanAttribute })
|
Determines whether or not the chip displays the remove styling and emits (removed) events. |
@Input()
|
Role for the root of the chip. |
@Input()
|
The value of the chip. Defaults to the content inside
the |
@Output()
|
Emitted when the chip is destroyed. |
@Output()
|
Emitted when the chip is edited. |
@Output()
|
Emitted when a chip is to be removed. |
|
|
|
The projected chip edit input. |
|
The default chip edit input that is used if none is projected into this chip row. |
|
The chip's leading edit icon. |
|
The chip's leading icon. |
|
Action receiving the primary set of user interactions. |
|
The chip's trailing remove icon. |
|
The chip's trailing icon. |
focus | |
---|---|
Allows for programmatic focusing of the chip. |
remove | |
---|---|
Allows for programmatic removal of the chip. Informs any listeners of the removal request. Does not remove the chip from the DOM. |
MatChipSet
Basic container component for the MatChip component.
Extended by MatChipListbox and MatChipGrid for different interaction patterns.
Selector: mat-chip-set
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
Whether the chip set is disabled. |
@Input()
|
The ARIA role applied to the chip set. |
|
Combined stream of all of the child chips' destroy events. |
|
Combined stream of all of the child chips' focus events. |
|
Combined stream of all of the child chips' remove events. |
|
Whether the chip list contains chips or not. |
|
Whether any of the chips inside of this chip-set has focus. |
focus | |
---|---|
Dummy method for subclasses to override. Base chip set cannot be focused. |
MatChipListbox
extends
MatChipSet
An extension of the MatChipSet component that supports chip selection. Used with MatChipOption chips.
Selector: mat-chip-listbox
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({ transform: booleanAttribute })
|
Whether the chip set is disabled. |
@Input({ transform: booleanAttribute })
|
Whether checkmark indicator for single-selection options is hidden. |
@Input({ transform: booleanAttribute })
|
Whether the user should be allowed to select multiple chips. |
@Input({ transform: booleanAttribute })
|
Whether this chip listbox is required. |
@Input()
|
The ARIA role applied to the chip set. |
@Input({ transform: booleanAttribute })
|
Whether or not this chip listbox is selectable. When a chip listbox is not selectable, the selected states for all the chips inside the chip listbox are always ignored. |
@Input()
|
The value of the listbox, which is the combined value of the selected chips. |
@Output()
|
Event emitted when the selected chip listbox value has been changed by the user. |
|
Combined stream of all of the child chips' blur events. |
|
Combined stream of all of the child chips' destroy events. |
|
Combined stream of all of the child chips' focus events. |
|
Combined stream of all of the child chips' remove events. |
|
Combined stream of all of the child chips' selection change events. |
|
Whether the chip list contains chips or not. |
|
Whether any of the chips inside of this chip-set has focus. |
|
The array of selected chips inside the chip listbox. |
focus | |
---|---|
Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there are no selected chips. |
MatChipGrid
extends
MatChipSet
An extension of the MatChipSet component used with MatChipRow chips and the matChipInputFor directive.
Selector: mat-chip-grid
Name | Description |
---|---|
@Input()
|
An object used to control when error messages are shown. |
@Input()
|
The ARIA role applied to the chip set. |
@Output()
|
Emits when the chip grid value has been changed by the user. |
|
Combined stream of all of the child chips' blur events. |
|
Combined stream of all of the child chips' destroy events. |
|
Combined stream of all of the child chips' focus events. |
|
Combined stream of all of the child chips' remove events. |
|
Whether the chip grid is in an error state. |
|
Whether any chips or the matChipInput inside of this chip-grid has focus. |
|
focus | |
---|---|
Focuses the first chip in this chip grid, or the associated input when there are no eligible chips. |
registerInput | |
---|---|
Associates an HTML input element with this chip grid. |
|
Parameters | |
inputElement MatChipTextControl
|
|
updateErrorState | |
---|---|
Refreshes the error state of the chip grid. |
MatChipInput
Directive that adds chip-specific behaviors to an input element inside <mat-form-field>
.
May be placed inside or outside of a <mat-chip-grid>
.
Selector: input[matChipInputFor]
Exported as: matChipInput, matChipInputForName | Description |
---|---|
@Input({ alias: 'matChipInputAddOnBlur', transform: booleanAttribute })
|
Whether or not the chipEnd event will be emitted when the input is blurred. |
@Input('matChipInputFor')
|
Register input for chip list |
@Input({ transform: booleanAttribute })
|
Whether the input is disabled. |
@Input({ alias: 'matChipInputDisabledInteractive', transform: booleanAttribute })
|
Whether the input should remain interactive when it is disabled. |
@Input()
|
Unique id for the input. |
@Input()
|
The input's placeholder text. |
@Input({ transform: booleanAttribute })
|
Whether the input is readonly. |
@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. |
|
The native input element to which this directive is attached. |
clear | |
---|---|
Clears the input |
focus | |
---|---|
Focuses the input. |
setDescribedByIds | |
---|---|
Parameters | |
ids string[]
|
|
MatChipAvatar
Avatar image within a chip.
Selector: mat-chip-avatar [matChipAvatar]
MatChipTrailingIcon
Non-interactive trailing icon in a chip.
Selector: mat-chip-trailing-icon [matChipTrailingIcon]
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
Whether the action is disabled. |
|
MDC considers all trailing actions as a remove icon, but we support non-interactive trailing icons. |
focus |
---|
MatChipEdit
Directive to edit the parent chip when the leading action icon is clicked or when the ENTER key is pressed on it.
Recommended for use with the Material Design "edit" icon available at https://material.io/icons/#ic_edit.
Example:
<mat-chip>
<button matChipEdit aria-label="Edit">
<mat-icon>edit</mat-icon>
</button>
</mat-chip>
Selector: [matChipEdit]
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
Whether the action is disabled. |
@Input()
|
Whether the action is interactive. |
focus |
---|
MatChipRemove
Directive to remove the parent chip when the trailing icon is clicked or when the ENTER key is pressed on it.
Recommended 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>
Selector: [matChipRemove]
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
Whether the action is disabled. |
@Input()
|
Whether the action is interactive. |
focus |
---|
MatChipEditInput
A directive that makes a span editable and exposes functions to modify and retrieve the element's contents.
Selector: span[matChipEditInput]
getNativeElement | |
---|---|
Returns | |
HTMLElement
|
|
getValue | |
---|---|
Returns | |
string
|
|
initialize | |
---|---|
Parameters | |
initialValue string
|
|
setValue | |
---|---|
Parameters | |
value string
|
|
MatChipSelectionChange
Event object emitted by MatChipOption when selected or deselected.
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. |
MatChipListboxChange
Change event object that is emitted when the chip listbox value has changed.
Name | Description |
---|---|
|
Chip listbox that emitted the event. |
|
Value of the chip listbox when the event was emitted. |
MatChipGridChange
Change event object that is emitted when the chip grid value has changed.
Name | Description |
---|---|
|
Chip grid that emitted the event. |
|
Value of the chip grid when the event was emitted. |
MatChipEvent
Represents an event fired on an individual mat-chip
.
Name | Description |
---|---|
|
The chip the event was fired on. |
MatChipEditedEvent
Represents an event fired on an individual mat-chip
when it is edited.
Name | Description |
---|---|
|
The final edit value. |
MatChipInputEvent
Represents an input event on a matChipInput
.
Name | Description |
---|---|
|
Reference to the chip input that emitted the event. |
|
The value of the input. |
Deprecated
|
The native |
MatChipsDefaultOptions
Default options, for the chips module, that can be overridden.
Name | Description |
---|---|
|
Whether icon indicators should be hidden for single-selection. |
|
Whether the chip input should be interactive while disabled by default. |
|
The list of key codes that will trigger a chipEnd event. |
MatChipTextControl
Interface for a text control that is used to drive interaction with a mat-chip-list.
Name | Description |
---|---|
|
Gets the list of ids the input is described by. |
|
Whether the text control is empty. |
|
Whether the text control has browser focus. |
|
Unique identifier for the text control. |
|
The text control's placeholder text. |
focus | |
---|---|
Focuses the text control. |
setDescribedByIds | |
---|---|
Sets the list of ids the input is described by. |
|
Parameters | |
ids string[]
|
|
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>;
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<unknown>;
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<unknown>;
MAT_CHIP_EDIT
Injection token that can be used to reference instances of MatChipEdit
. It serves as
alternative token to the actual MatChipEdit
class which could cause unnecessary
retention of the class and its directive metadata.
const MAT_CHIP_EDIT: InjectionToken<unknown>;
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<unknown>;
MAT_CHIP
Injection token used to avoid a circular dependency between the MatChip
and MatChipAction
.
const MAT_CHIP: InjectionToken<unknown>;