Chips
Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
API
Directive: MdcChipIconDirective
Selector: [mdcChipIcon]
Directive for the (optional) leading or trailing icon of an mdcChip.
Depending on the position within the mdcChip the icon will determine
whether it is a leading or trailing icon.
Trailing icons must implement the functionality to remove the chip from the set, and
must only be added to input chips (mdcChipSet="input"). Chips with a trailing
icon must implement the remove event. Trailing icons should be wrapped
inside an mdcChipCell.
| Property | Description |
|---|---|
@Output()
interact
EventEmitter<void>
|
Event emitted for trailing icon user interactions. Please note that chip removal should be
handled by the |
Directive: MdcChipTextDirective
Selector: [mdcChipText]
Directive for the text of an mdcChip. Must be contained in an mdcChipPrimaryAction
directive.
Directive: MdcChipPrimaryActionDirective
Selector: [mdcChipPrimaryAction]
Directive for the primary action element of a chip. The mdcChipPrimaryAction must
contain the mdcChipText directive, and be contained by an mdcChipCell directive.
Directive: MdcChipCellDirective
Selector: [mdcChipCell]
Directive for the main content of a chip, or for an optional trailing
action on input chips. This directive must contain an
mdcChipPrimaryActione or an mdcChipIcon (when used for the trailing action).
An mdcChipCell must always be the direct child of an mdcChip.
Directive: MdcChipDirective
Selector: [mdcChip]
Directive for a chip. Chips must be child elements of an mdcChipSet,
and must contain an mdcChipCell, and may additionally contain an mdcChipIcon for
the leading icon. An optional trailing icon must be wrapped in a second mdcChipCell.
| Property | Description |
|---|---|
@Output()
interact
EventEmitter<void>
|
Event emitted for user interaction with the chip. |
@Output()
remove
EventEmitter<void>
|
Event emitted when the user has removed (by clicking the trailing icon) the chip.
This event must be implemented when the |
@Output()
navigation
EventEmitter<{
key: string;
source: ChipEventSource;
}>
|
Event emitted when a navigation event has occured. |
@Output()
selectedChange
EventEmitter<boolean>
|
Event emitted when the chip changes from not-selected to selected state or vice versa (for filter and choice chips). |
@Input()
value
string
|
The value the chip represents. The value must be unique for the |
@Input()
selected
boolean
|
The 'selected' state of the chip. Filter and choice chips are either selected or not selected. Making a choice chip selected, will make all other chips in that set not selected. |
@Input()
removable
boolean
|
If set to a value other than |
Directive: MdcChipSetDirective
Selector: [mdcChipSet]
Directive for a chip-set (a collection of mdcChip).
| Property | Description |
|---|---|
@Input()
mdcChipSet
"choice" | "filter" | "input" | "action"
|
Chip sets by default contain 'action' chips. Set this value to |