The chip area allows you to perform more complex scenarios with chips that require interaction, like dragging, selection, navigation, etc.
Igx Module
IgxChipsModule
Igx Theme
igx-chip-theme
Igx Keywords
chip area, chip
Igx Group
display

Example

<igx-chips-area>
   <igx-chip *ngFor="let chip of chipList" [id]="chip.id">
       <span>{{chip.text}}</span>
   </igx-chip>
</igx-chips-area>

Constructors

Section titled "Constructors"

IgxChipsAreaComponent 

new IgxChipsAreaComponent(): IgxChipsAreaComponent

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:185

Returns IgxChipsAreaComponent

Properties

Section titled "Properties"

ariaLabel

Section titled "ariaLabel"

Returns the aria-label attribute of the chips area.

 
ariaLabel: string = 'chip area'

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:81

Example

let ariaLabel = this.chipsArea.ariaLabel;

cdr

Section titled "cdr" 
cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:55

chipsList

Section titled "chipsList"

Holds the chip in the chips area.

 
chipsList: QueryList<IgxChipComponent>

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

Example

ngAfterViewInit(){
   let chips = this.chipsArea.chipsList;
}

element

Section titled "element" 
element: ElementRef<any>

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:56

height

Section titled "height"

Sets the height of the chips area.

 
height: number

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

Example

<igx-chips-area #chipsArea [width]="300" [height]="10" (onReorder)="chipsOrderChanged($event)"></igx-chips-area>

moveEnd

Section titled "moveEnd"

Emits an event after an chip in the chips area is moved.

 
moveEnd: EventEmitter<IBaseChipsAreaEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:162

Example

<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (moveEnd)="moveEnd($event)"></igx-chips-area>

moveStart

Section titled "moveStart"

Emits an event when an chip in the chips area is moved.

 
moveStart: EventEmitter<IBaseChipsAreaEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:151

Example

<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (moveStart)="moveStart($event)"></igx-chips-area>

reorder

Section titled "reorder"

Emits an event when chips in the chips area should be reordered. Returns an array of chips.

 
reorder: EventEmitter<IChipsAreaReorderEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:127

Example

<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onReorder)="changedOrder($event)"></igx-chips-area>

role

Section titled "role"

Returns the role attribute of the chips area.

 
role: string = 'listbox'

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:69

Example

let chipsAreaRole = this.chipsArea.role;

selectionChange

Section titled "selectionChange"

Emits an event when an chip in the chips area is selected/deselected. Fired after the chips area is initialized if there are initially selected chips as well. Returns an array of selected chips and the chip area.

 
selectionChange: EventEmitter<IChipsAreaSelectEventArgs>

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:140

Example

<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (selectionChange)="selection($event)"></igx-chips-area>

width

Section titled "width"

Sets the width of the chips area.

 
width: number

Defined in projects/igniteui-angular/chips/src/chips/chips-area.component.ts:92

Example

<igx-chips-area #chipsArea [width]="300" [height]="10" (onReorder)="chipsOrderChanged($event)"></igx-chips-area>