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

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

Example

let ariaLabel = this.chipsArea.ariaLabel;

cdr

Section titled "cdr" 
cdr: ChangeDetectorRef

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

chipsList

Section titled "chipsList"

Holds the IgxChipComponent in the IgxChipsAreaComponent.

 
chipsList: QueryList<IgxChipComponent>

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

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

height

Section titled "height"

Sets the height of the IgxChipsAreaComponent.

 
height: number

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

Example

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

moveEnd

Section titled "moveEnd"

Emits an event after an IgxChipComponent in the IgxChipsAreaComponent is moved.

 
moveEnd: EventEmitter<IBaseChipsAreaEventArgs>

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

Example

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

moveStart

Section titled "moveStart"

Emits an event when an IgxChipComponent in the IgxChipsAreaComponent is moved.

 
moveStart: EventEmitter<IBaseChipsAreaEventArgs>

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

Example

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

reorder

Section titled "reorder"

Emits an event when IgxChipComponents in the IgxChipsAreaComponent should be reordered. Returns an array of IgxChipComponents.

 
reorder: EventEmitter<IChipsAreaReorderEventArgs>

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

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

Example

let chipsAreaRole = this.chipsArea.role;

selectionChange

Section titled "selectionChange"

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

 
selectionChange: EventEmitter<IChipsAreaSelectEventArgs>

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

Example

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

width

Section titled "width"

Sets the width of the IgxChipsAreaComponent.

 
width: number

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

Example

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