Chip is compact visual component that displays information in an obround.
Igx Module
IgxChipsModule
Igx Theme
igx-chip-theme
Igx Keywords
chip
Igx Group
display

Remarks

[object Object]

Example

<igx-chip class="chipStyle" [id]="901" [draggable]="true" [removable]="true" (remove)="chipRemoved($event)">
   <igx-avatar class="chip-avatar-resized" igxPrefix></igx-avatar>
</igx-chip>

Constructors

Section titled "Constructors"

IgxChipComponent

new IgxChipComponent(): IgxChipComponent

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:614

Returns IgxChipComponent

Properties

Section titled "Properties"

animateOnRelease

Section titled "animateOnRelease"

Enables/disables the draggable element animation when the element is released. By default it's set to true.

 
animateOnRelease: boolean = true

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:187

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [animateOnRelease]="false"></igx-chip>

cdr

Section titled "cdr" 
cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:90

chipClick

Section titled "chipClick"

Emits an event when the IgxChipComponent is clicked. Returns the clicked IgxChipComponent, whether the event should be canceled.

 
chipClick: EventEmitter<IChipClickEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:404

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (click)="chipClick($event)">

data

Section titled "data"

Stores data related to the chip.

 
data: any

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:163

Example

<igx-chip [data]="{ value: 'Country' }"></igx-chip>

disabled

Section titled "disabled"

Disables the IgxChipComponent. When disabled it restricts user interactions like focusing on click or tab, selection on click or Space, dragging. By default it is set to false.

 
disabled: boolean = false

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:268

Example

<igx-chip [id]="chip.id" [disabled]="true"></igx-chip>

document

Section titled "document" 
document: Document

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:93

dragDirective

Section titled "dragDirective"

Property that contains a reference to the IgxDragDirective the IgxChipComponent uses for dragging behavior.

 
dragDirective: IgxDragDirective

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:537

Example

<igx-chip [id]="chip.id" [draggable]="true"></igx-chip>
onMoveStart(event: IBaseChipEventArgs){
    let dragDirective = event.owner.dragDirective;
}

dragDrop

Section titled "dragDrop"

Emits an event when the IgxChipComponent has been dropped in the IgxChipsAreaComponent. Returns the target IgxChipComponent, the drag IgxChipComponent, as well as the original drop event arguments.

 
dragDrop: EventEmitter<IChipEnterDragAreaEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:493

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragDrop)="chipLeave($event)">

dragEnter

Section titled "dragEnter"

Emits an event when the IgxChipComponent has entered the IgxChipsAreaComponent. Returns the target IgxChipComponent, the drag IgxChipComponent, as well as the original drop event arguments.

 
dragEnter: EventEmitter<IChipEnterDragAreaEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:454

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragEnter)="chipEnter($event)">

draggable

Section titled "draggable"

Defines if the IgxChipComponent can be dragged in order to change it's position. By default it is set to false.

 
draggable: boolean = false

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:175

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true"></igx-chip>

dragLeave

Section titled "dragLeave"

Emits an event when the IgxChipComponent has left the IgxChipsAreaComponent. Returns the target IgxChipComponent, the drag IgxChipComponent, as well as the original drop event arguments.

 
dragLeave: EventEmitter<IChipEnterDragAreaEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:467

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragLeave)="chipLeave($event)">

dragOver

Section titled "dragOver"

Emits an event when the IgxChipComponent is over the IgxChipsAreaComponent. Returns the target IgxChipComponent, the drag IgxChipComponent, as well as the original drop event arguments.

 
dragOver: EventEmitter<IChipEnterDragAreaEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:480

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragOver)="chipOver($event)">

hideBaseOnDrag

Section titled "hideBaseOnDrag"

Enables/disables the hiding of the base element that has been dragged. By default it's set to true.

 
hideBaseOnDrag: boolean = true

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:199

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [hideBaseOnDrag]="false"></igx-chip>

id

Section titled "id"

Sets the value of id attribute. If not provided it will be automatically generated.

 
id: string

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:120

Example

<igx-chip [id]="'igx-chip-1'"></igx-chip>

keyDown

Section titled "keyDown"

Emits an event when the IgxChipComponent keyboard navigation is being used. Returns the focused/selected IgxChipComponent, whether the event should be canceled, if the alt, shift or control key is pressed and the pressed key name.

 
keyDown: EventEmitter<IChipKeyDownEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:441

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (keyDown)="chipKeyDown($event)">

moveEnd

Section titled "moveEnd"

Emits an event when the IgxChipComponent moving ends. Returns the moved IgxChipComponent.

 
moveEnd: EventEmitter<IBaseChipEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:380

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveEnd)="moveEnded($event)">

moveStart

Section titled "moveStart"

Emits an event when the IgxChipComponent moving starts. Returns the moving IgxChipComponent.

 
moveStart: EventEmitter<IBaseChipEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:368

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveStart)="moveStarted($event)">

removable

Section titled "removable"

Defines if the IgxChipComponent should render remove button and throw remove events. By default it is set to false.

 
removable: boolean = false

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:211

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [removable]="true"></igx-chip>

remove

Section titled "remove"

Emits an event when the IgxChipComponent is removed. Returns the removed IgxChipComponent.

 
remove: EventEmitter<IBaseChipEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:392

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (remove)="remove($event)">

removeIcon

Section titled "removeIcon"

Overrides the default icon that the chip applies to the remove button.

 
removeIcon: TemplateRef<any>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:223

Example

<igx-chip [id]="chip.id" [removable]="true" [removeIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>delete</igx-icon></ng-template>

role

Section titled "role"

Returns the role attribute of the chip.

 
role: string = 'option'

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:131

Example

let chipRole = this.chip.role;

selectable

Section titled "selectable"

Defines if the IgxChipComponent can be selected on click or through navigation, By default it is set to false.

 
selectable: boolean = false

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:235

Example

<igx-chip [id]="chip.id" [draggable]="true" [removable]="true" [selectable]="true"></igx-chip>

selectedChanged

Section titled "selectedChanged"

Emits event when the IgxChipComponent is selected/deselected and any related animations and transitions also end.

 
selectedChanged: EventEmitter<IBaseChipEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:428

Example

<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanged)="chipSelectEnd($event)">

selectedChanging

Section titled "selectedChanging"

Emits event when the IgxChipComponent is selected/deselected. Returns the selected chip reference, whether the event should be canceled, what is the next selection state and when the event is triggered by interaction originalEvent is provided, otherwise originalEvent is null.

 
selectedChanging: EventEmitter<IChipSelectEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:417

Example

<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanging)="chipSelect($event)">

selectIcon

Section titled "selectIcon"

Overrides the default icon that the chip applies when it is selected.

 
selectIcon: TemplateRef<any>

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:247

Example

<igx-chip [id]="chip.id" [selectable]="true" [selectIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>done_outline</igx-icon></ng-template>

Optional variant

Section titled "variant"

Sets/gets the variant of the chip.

 
variant: IgxChipTypeVariant

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:109

Remarks

Allowed values are primary, info, success, warning, danger. Providing no/nullish value leaves the chip in its default state.

Example

<igx-chip variant="success"></igx-chip>

color

Section titled "color" 
color: any

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:322, projects/igniteui-angular/chips/src/chips/chip.component.ts:338

resourceStrings

Section titled "resourceStrings" 
resourceStrings: IChipResourceStrings

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:347, projects/igniteui-angular/chips/src/chips/chip.component.ts:354

selected

Section titled "selected" 
selected: boolean

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:285, projects/igniteui-angular/chips/src/chips/chip.component.ts:301

tabIndex

Section titled "tabIndex" 
tabIndex: number

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:143, projects/igniteui-angular/chips/src/chips/chip.component.ts:147

Methods

Section titled "Methods"

ngOnDestroy

Section titled "ngOnDestroy"

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

ngOnDestroy(): void

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:922

Returns void

ngOnInit

Section titled "ngOnInit"

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

ngOnInit(): void

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:918

Returns void

onRemoveMouseDown

Section titled "onRemoveMouseDown" 
onRemoveMouseDown(event: PointerEvent | MouseEvent): void

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:700

Parameters

  • event: PointerEvent | MouseEvent

Returns void

onSelectTransitionDone

Section titled "onSelectTransitionDone" 
onSelectTransitionDone(event: any): void

Defined in projects/igniteui-angular/chips/src/chips/chip.component.ts:642

Parameters

  • event: any

Returns void