Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxChipsAreaComponent

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>

Hierarchy

Hierarchy

  • IgxChipsAreaComponent

Implements

  • DoCheck
  • AfterViewInit
  • OnDestroy

Constructors

Properties

Constructors

constructor

Properties

ariaLabel

ariaLabel: string = 'chip area'

Returns the aria-label attribute of the chips area.

Example

let ariaLabel = this.chipsArea.ariaLabel;

cdr

cdr: ChangeDetectorRef

chipsList

chipsList: QueryList<IgxChipComponent>

Holds the IgxChipComponent in the IgxChipsAreaComponent.

Example

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

element

element: ElementRef<any>

height

height: number

An

Input

property that sets the height of the IgxChipsAreaComponent.

Example

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

moveEnd

moveEnd: EventEmitter<IBaseChipsAreaEventArgs> = ...

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

Example

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

moveStart

moveStart: EventEmitter<IBaseChipsAreaEventArgs> = ...

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

Example

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

reorder

reorder: EventEmitter<IChipsAreaReorderEventArgs> = ...

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

Example

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

role

role: string = 'listbox'

Returns the role attribute of the chips area.

Example

let chipsAreaRole = this.chipsArea.role;

selectionChange

selectionChange: EventEmitter<IChipsAreaSelectEventArgs> = ...

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.

Example

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

width

width: number

An

Input

property that sets the width of the IgxChipsAreaComponent.

Example

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