### File

`packages/components/eui-chip-list/eui-chip-list.component.ts`

### Description

Multiple eui-chips displayed dynamically as a group of multiple interactive elements.

### Implements

`AfterViewInit` `AfterContentInit` `OnDestroy` `OnChanges` `OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant euiSizeS euiSizeVariant euiOutline euiDisabled
selector | `eui-chip-list, div[euiChipList], ul[euiChipList]`
imports | `NgTemplateOutlet` `DragDropModule` `TranslateModule` `EuiTruncatePipe` `EuiTooltipDirective` `EUI_CHIP` `EUI_BUTTON` `EUI_ICON`
templateUrl | `./eui-chip-list.component.html`
styleUrl | `./eui-chip-list.scss`

### Index

###### Properties

- chipListDragAndDropItems
- chipListDropList
- Public connectComponent
- Public droppableArea
- Public e2eAttr
- euiChipItems
- euiChipsContent

###### Methods

- Public drop
- Public getChipContent
- Public getChipIconAfter
- Public getChipIconBefore
- Public getChipLabel
- Public onDragEnter
- Public onDragReleased
- Public onDragStarted
- Public onDropGrid
- onFocus
- Public onRemove
- Public toggleTags

###### Inputs

- ariaLabel
- chips
- chipsLabelTruncateCount
- chipsSortOrder
- dragAndDropConnectedTo
- dragAndDropSourceName
- dropListOrientation
- isChipsDragAndDrop
- isChipsRemovable
- isChipsSorted
- isGrid
- isMaxVisibleChipsOpened
- isSquared
- maxVisibleChipsCount
- toggleLinkLessLabel
- toggleLinkMoreLabel

###### Outputs

- chipDragRelease
- chipDragStart
- chipDrop
- chiplistFocus
- chipRemove
- chipsInit

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

ariaLabel
Type : `string`
Default value : `'eUI Chip List'`
Sets the `aria-label` attribute for the host element. It must now be implemented at the application level. For more information, see: EUI Showcase

chips
Type : `any[]`
Array of chips to display in the list when used with the data approach. It must now be implemented at the application level. For more information, see: EUI Showcase

chipsLabelTruncateCount
Type : `any`
Default value : `null`
Whether the chips label length are limited by the value of this option. It must now be implemented at the application level. For more information, see: EUI Showcase

chipsSortOrder
Type : `"ASC" | "DESC"`
Default value : `'ASC'`
In combination with `isChipsSorted`. Sets the sort criteria of the chips. It must now be implemented at the application level. For more information, see: EUI Showcase

dragAndDropConnectedTo
Type : `string[]`
Default value : `[]`
In combination with `isChipsDragAndDrop`, sets the name to the chips source with which a drag and drop will be done. It must now be implemented at the application level. For more information, see: EUI Showcase

dragAndDropSourceName
Type : `string`
In combination with `isChipsDragAndDrop`, sets the name to the chips source. It must now be implemented at the application level. For more information, see: EUI Showcase

dropListOrientation
Type : `"horizontal" | "vertical"`
Default value : `'horizontal'`
In combination with `isChipsDragAndDrop`, sets the orientation of the list. It must now be implemented at the application level. For more information, see: EUI Showcase

isChipsDragAndDrop
Type : `boolean`
Default value : `false`
Whether the chips can be drag and dropped. It must now be implemented at the application level. For more information, see: EUI Showcase

isChipsRemovable
Type : `boolean`
Default value : `false`
Whether the chip can be removed from the list. It must now be implemented at the application level. For more information, see: EUI Showcase

isChipsSorted
Type : `boolean`
Default value : `false`
Whether this chips are sorted on their label. It must now be implemented at the application level. For more information, see: EUI Showcase

isGrid
Type : `boolean`
Default value : `false`
In combination with `isChipsDragAndDrop`. Whether the chips are drag and droppable in a flex container. It must now be implemented at the application level. For more information, see: EUI Showcase

isMaxVisibleChipsOpened
Type : `boolean`
Default value : `false`
In combination with `maxVisibleChipsCount`. Whether all chips are shown by default. It must now be implemented at the application level. For more information, see: EUI Showcase

isSquared
Type : `boolean`
Default value : `false`

maxVisibleChipsCount
Type : `any`
Default value : `null`
Whether a limited amount, defined by this option, is used to display the chips. It must now be implemented at the application level. For more information, see: EUI Showcase

toggleLinkLessLabel
Type : `string`
Default value : `null`
In combination with `maxVisibleChipsCount`, sets the label of the 'less chips' button, if not provided an arrow left icon will be displayed only. It must now be implemented at the application level. For more information, see: EUI Showcase

toggleLinkMoreLabel
Type : `string`
Default value : `null`
In combination with `maxVisibleChipsCount`, sets the label of the 'more chips' button, if not provided an arrow right icon will be displayed only. It must now be implemented at the application level. For more information, see: EUI Showcase

### Outputs

chipDragRelease
Type : `EventEmitter`
Event emitted when a chip drag is released. It must now be implemented at the application level. For more information, see: EUI Showcase

chipDragStart
Type : `EventEmitter`
Event emitted when a chip drag starts. It must now be implemented at the application level. For more information, see: EUI Showcase

chipDrop
Type : `EventEmitter`
Event emitted when a chip drag is released. It must now be implemented at the application level. For more information, see: EUI Showcase

chiplistFocus
Type : `EventEmitter`
Event emitted when the list gets the focus. It must now be implemented at the application level. For more information, see: EUI Showcase

chipRemove
Type : `EventEmitter`
Event emitted when a chip is removed from the list. It must now be implemented at the application level. For more information, see: EUI Showcase

chipsInit
Type : `EventEmitter`
Event emitted with `CdkDropList` object when the chiplist is initiated. It must now be implemented at the application level. For more information, see: EUI Showcase

### HostBindings

class
Type : `string`

### Methods

Public drop
`drop(e: CdkDragDrop<literal type>)`

Drag and Drop chip handler used when a chip is moved inside a container.

Parameters :

Name | Type | Optional | Description
e | `CdkDragDrop<literal type>` | No | `CdkDragDrop` object used to move the chip in a list.

Returns : `void`

Public getChipContent
`getChipContent(euiChip: any)`

Parameters :

Name | Type | Optional
euiChip | `any` | No

Returns : `string`

Public getChipIconAfter
`getChipIconAfter(euiChip: any)`

Method that returns a boolean indicating of an icon has been declared after the label.

Parameters :

Name | Type | Optional | Description
euiChip | `any` | No | Chip to check.

Returns : `boolean`

`true` if an icon has been declared otherwise `false`.

Public getChipIconBefore
`getChipIconBefore(euiChip: any)`

Method that returns a boolean indicating if an icon has been declared before the label.

Parameters :

Name | Type | Optional | Description
euiChip | `any` | No | Chip to check.

Returns : `boolean`

`true` if an icon has been declared otherwise `false`.

Public getChipLabel
`getChipLabel(euiChip: any)`

Parameters :

Name | Type | Optional
euiChip | `any` | No

Returns : `string`

Public onDragEnter
`onDragEnter(event: CdkDragEnter)`

Drag and Drop chip handler used when a chip is moved to another container.

Parameters :

Name | Type | Optional | Description
event | `CdkDragEnter` | No | `CdkDragEnter` object used to move the chip in a list.

Returns : `void`

Public onDragReleased
`onDragReleased(event: CdkDragRelease)`

Method called when a chip is released after dragging.

Parameters :

Name | Type | Optional | Description
event | `CdkDragRelease` | No | `CdkDragRelease` object used to move the chip in a list.

Returns : `void`

Public onDragStarted
`onDragStarted(event: CdkDragStart)`

Method called when a chip starts to be dragged.

Parameters :

Name | Type | Optional | Description
event | `CdkDragStart` | No | `CdkDragStart` object used to move the chip in a list.

Returns : `void`

Public onDropGrid
`onDropGrid(e: CdkDragDrop<literal type>)`

Method called when a chip is dropped.

Parameters :

Name | Type | Optional
e | `CdkDragDrop<literal type>` | No

Returns : `void`

onFocus
`onFocus()`
Method called when the list gets the focus. Returns : `void`

Public onRemove
`onRemove(removed: EuiChipComponent | EuiChip | literal type | any)`

Remove chip from the list handler

Parameters :

Name | Type | Optional | Description
removed | `EuiChipComponent | EuiChip | literal type | any` | No | Chip that is removed

Returns : `void`

Public toggleTags
This method has been removed in version 21. It must now be implemented at the application level. For more information, see: [EUI Showcase](https://eui.ecdevops.eu/eui-showcase-ux-components-21.x/style-guide/components/eui-chip-list)
`toggleTags()`
Method toggling the display of the chips in combination with `maxVisibleChipsCount`. It must now be implemented at the application level. For more information, see: EUI Showcase Returns : `void`

### Properties

chipListDragAndDropItems
Type : `CdkDropList`
Decorators : `@ViewChild('chipListDragAndDropItems', {read: CdkDropList})`

chipListDropList
Type : `CdkDropList`
Decorators : `@ViewChild('chipListDropList', {read: CdkDropList})`

Public connectComponent
Type : `CdkDropList[]`
Default value : `[]`

Public droppableArea
Type : `(CdkDropList | string)[]`

Public e2eAttr
Type : `string`
Default value : `'eui-chip-list'`

euiChipItems
Type : `QueryList<ElementRef>`
Decorators : `@ViewChildren('euiChipItem', {read: ElementRef})`

euiChipsContent
Type : `QueryList<EuiChipComponent>`
Decorators : `@ContentChildren(undefined)`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the label title component based on its current state. Returns : `string`

# results matching ""

# No results matching ""