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:632

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:192

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:95

chipClick

Section titled "chipClick"

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

 
chipClick: EventEmitter<IChipClickEventArgs>

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

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:168

Example

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

disabled

Section titled "disabled"

Disables the chip. 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:286

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:98

dragDirective

Section titled "dragDirective"

Property that contains a reference to the drag the chip uses for dragging behavior.

 
dragDirective: IgxDragDirective

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

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 chip has been dropped in the chips area. Returns the target chip, the drag chip, as well as the original drop event arguments.

 
dragDrop: EventEmitter<IChipEnterDragAreaEventArgs>

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

Example

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

dragEnter

Section titled "dragEnter"

Emits an event when the chip has entered the chips area. Returns the target chip, the drag chip, as well as the original drop event arguments.

 
dragEnter: EventEmitter<IChipEnterDragAreaEventArgs>

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

Example

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

draggable

Section titled "draggable"

Defines if the chip 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:180

Example

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

dragLeave

Section titled "dragLeave"

Emits an event when the chip has left the chips area. Returns the target chip, the drag chip, as well as the original drop event arguments.

 
dragLeave: EventEmitter<IChipEnterDragAreaEventArgs>

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

Example

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

dragOver

Section titled "dragOver"

Emits an event when the chip is over the chips area. Returns the target chip, the drag chip, as well as the original drop event arguments.

 
dragOver: EventEmitter<IChipEnterDragAreaEventArgs>

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

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:204

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:125

Example

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

keyDown

Section titled "keyDown"

Emits an event when the chip keyboard navigation is being used. Returns the focused/selected chip, 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:459

Example

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

moveEnd

Section titled "moveEnd"

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

 
moveEnd: EventEmitter<IBaseChipEventArgs>

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

Example

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

moveStart

Section titled "moveStart"

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

 
moveStart: EventEmitter<IBaseChipEventArgs>

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

Example

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

outlined

Section titled "outlined"

Sets/gets whether the chip is outlined. Default value is false.

 
outlined: boolean = false

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

Example

<igx-chip outlined></igx-chip>

removable

Section titled "removable"

Defines if the chip 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:216

Example

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

remove

Section titled "remove"

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

 
remove: EventEmitter<IBaseChipEventArgs>

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

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:228

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:136

Example

let chipRole = this.chip.role;

selectable

Section titled "selectable"

Defines if the chip 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:253

Example

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

selectedChanged

Section titled "selectedChanged"

Emits event when the chip 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:446

Example

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

selectedChanging

Section titled "selectedChanging"

Emits event when the chip 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:435

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:265

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 | null

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

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>

Accessors

Section titled "Accessors"

color

Section titled "color"

Returns the background color of the chip.

 
get color(): any

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

Example

@ViewChild('myChip')
public chip: IgxChipComponent;
ngAfterViewInit(){
    let chipColor = this.chip.color;
}

Returns any

Sets the chip background color. The color property supports string, rgb, hex.

 
set color(newColor: any): void

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

Example

<igx-chip #myChip [id]="'igx-chip-1'" [color]="'#ff0000'"></igx-chip>

Parameters

  • newColor: any

Returns void

resourceStrings

Section titled "resourceStrings"

An accessor that returns the resource strings.

 
get resourceStrings(): IChipResourceStrings

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

Returns IChipResourceStrings

An accessor that sets the resource strings. By default it uses EN resources.

 
set resourceStrings(value: IChipResourceStrings): void

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

Parameters

Returns void

selected

Section titled "selected"

Returns if the chip is selected.

 
get selected(): boolean

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

Example

@ViewChild('myChip')
public chip: IgxChipComponent;
selectedChip(){
    let selectedChip = this.chip.selected;
}

Returns boolean

Sets the chip selected state.

 
set selected(newValue: boolean): void

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

Example

<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true">

Two-way data binding:

<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">

Parameters

  • newValue: boolean

Returns void

tabIndex

Section titled "tabIndex" 
get tabIndex(): number

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

Returns number

Sets the value of tabindex attribute. If not provided it will use the element's tabindex if set.

 
set tabIndex(value: number): void

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

Example

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

Parameters

  • value: number

Returns void

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:940

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:936

Returns void

onRemoveMouseDown

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

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

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:660

Parameters

  • event: any

Returns void