Class IgxChipComponent

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

The Ignite UI Chip can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other. Chips reside in a container called chips area which is responsible for managing the interactions between the chips.

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>

Hierarchy

Hierarchy

  • DisplayDensityBase
    • IgxChipComponent

Implements

  • OnDestroy

Constructors

Properties

animateOnRelease: boolean = true

An

Input

property that enables/disables the draggable element animation when the element is released. By default it's set to true.

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [animateOnRelease]="false"></igx-chip>
cdr: ChangeDetectorRef
chipClick: EventEmitter<IChipClickEventArgs> = ...

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

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (click)="chipClick($event)">
data: any

An

Input

property that stores data related to the chip.

Example

<igx-chip [data]="{ value: 'Country' }"></igx-chip>
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
disabled: boolean = false

An

Input

property that defines if the IgxChipComponent is disabled. 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.

Example

<igx-chip [id]="chip.id" [disabled]="true"></igx-chip>
dragDirective: IgxDragDirective

Property that contains a reference to the IgxDragDirective the IgxChipComponent uses for dragging behavior.

Example

<igx-chip [id]="chip.id" [draggable]="true"></igx-chip>
onMoveStart(event: IBaseChipEventArgs){
let dragDirective = event.owner.dragDirective;
}
dragDrop: EventEmitter<IChipEnterDragAreaEventArgs> = ...

Emits an event when the IgxChipComponent has been dropped in the IgxChipsAreaComponent. Returns the target IgxChipComponent, the drag IgxChipComponent, as well as the original drop event arguments.

Example

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

Emits an event when the IgxChipComponent has entered the IgxChipsAreaComponent. Returns the target IgxChipComponent, the drag IgxChipComponent, as well as the original drop event arguments.

Example

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

Emits an event when the IgxChipComponent has left the IgxChipsAreaComponent. Returns the target IgxChipComponent, the drag IgxChipComponent, as well as the original drop event arguments.

Example

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

Emits an event when the IgxChipComponent is over the IgxChipsAreaComponent. Returns the target IgxChipComponent, the drag IgxChipComponent, as well as the original drop event arguments.

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragOver)="chipOver($event)">
draggable: boolean = false

An

Input

property that defines if the IgxChipComponent can be dragged in order to change it's position. By default it is set to false.

Example

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

An

Input

property that enables/disables the hiding of the base element that has been dragged. By default it's set to true.

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [hideBaseOnDrag]="false"></igx-chip>
id: string = ...

An

Input

property that sets the value of id attribute. If not provided it will be automatically generated.

Example

<igx-chip [id]="'igx-chip-1'"></igx-chip>
keyDown: EventEmitter<IChipKeyDownEventArgs> = ...

Emits an event when the IgxChipComponent keyboard navigation is being used. Returns the focused/selected IgxChipComponent, whether the event should be canceled, if the alt, shift or control key is pressed and the pressed key name.

Example

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

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

Example

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

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

Example

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

An

Input

property that defines if the IgxChipComponent should render remove button and throw remove events. By default it is set to false.

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [removable]="true"></igx-chip>
remove: EventEmitter<IBaseChipEventArgs> = ...

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

Example

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (remove)="remove($event)">
removeIcon: TemplateRef<any>

An

Input

property that overrides the default icon that the chip applies to the remove button.

Example

<igx-chip [id]="chip.id" [removable]="true" [removeIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>delete</igx-icon></ng-template>
role: string = 'option'

Returns the role attribute of the chip.

Example

let chipRole = this.chip.role;
selectIcon: TemplateRef<any>

An

Input

property that overrides the default icon that the chip applies when it is selected.

Example

<igx-chip [id]="chip.id" [selectable]="true" [selectIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>done_outline</igx-icon></ng-template>
selectable: boolean = false

An

Input

property that defines if the IgxChipComponent can be selected on click or through navigation, By default it is set to false.

Example

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

Emits event when the IgxChipComponent is selected/deselected and any related animations and transitions also end.

Example

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

Emits event when the IgxChipComponent 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.

Example

<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanging)="chipSelect($event)">
variant: string | {
    DANGER: "danger";
    INFO: "info";
    PRIMARY: "primary";
    SUCCESS: "success";
    WARNING: "warning";
}

Sets/gets the variant of the chip.

Remarks

Allowed values are primary, info, success, warning, danger. Providing an invalid value won't change the chip.

Example

<igx-chip [variant]="success"></igx-chip>

Accessors

  • get selected(): boolean
  • Returns if the IgxChipComponent is selected.

    Example

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

    Returns boolean

  • set selected(newValue): void
  • Sets the IgxChipComponent selected state.

    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

Methods

  • Sets the --component-size CSS variable based on the value of Display Density

    Returns "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"