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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Example

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Returns void

onRemoveMouseDown

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

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

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

Parameters

  • event: any

Returns void