Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxChipComponent

Chip is compact visual component that displays information in an obround.

IgxChipsModule

igx-chip-theme

chip

display

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.

<igx-chip class="chipStyle" [id]="901" [draggable]="true" [removable]="true" (remove)="chipRemoved($event)">
   <igx-avatar class="chip-avatar-resized" igxPrefix></igx-avatar>
</igx-chip>

Implements

  • OnInit
  • OnDestroy

Constructors

Properties

Accessors

Methods

Constructors

Properties

animateOnRelease: boolean = true

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

<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.

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

Stores data related to the chip.

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

Disables the IgxChipComponent. 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.

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

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

<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.

<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.

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

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

<igx-chip [id]="'igx-chip-1'" [draggable]="true"></igx-chip>
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.

<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.

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

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

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

Sets the value of id attribute. If not provided it will be automatically generated.

<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.

<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.

<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.

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

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

<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.

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

Overrides the default icon that the chip applies to the remove button.

<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.

let chipRole = this.chip.role;
selectable: boolean = false

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

<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.

<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.

<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanging)="chipSelect($event)">
selectIcon: TemplateRef<any>

Overrides the default icon that the chip applies when it is selected.

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

Sets/gets the variant of the chip.

Allowed values are primary, info, success, warning, danger. Providing no/nullish value leaves the chip in its default state.

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

Accessors

  • get selected(): boolean

    Returns if the IgxChipComponent is selected.

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

    Returns boolean

  • set selected(newValue: boolean): void

    Sets the IgxChipComponent selected state.

    <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

  • 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.

    Returns void