Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

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>

Implements

  • OnInit
  • OnDestroy

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

animateOnRelease

animateOnRelease: boolean = true

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

cdr: ChangeDetectorRef

chipClick

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

data: any

Stores data related to the chip.

Example

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

disabled

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.

Example

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

document

document: any

dragDirective

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

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

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

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

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

draggable: boolean = false

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

hideBaseOnDrag: boolean = true

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

id: string = ...

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

Example

<igx-chip [id]="'igx-chip-1'"></igx-chip>

keyDown

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

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

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

removable: boolean = false

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

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

removeIcon: TemplateRef<any>

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

role: string = 'option'

Returns the role attribute of the chip.

Example

let chipRole = this.chip.role;

selectIcon

selectIcon: TemplateRef<any>

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

selectable: boolean = false

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

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

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

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

color

resourceStrings

selected

  • 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

tabIndex

Methods

ngOnDestroy

ngOnInit

  • ngOnInit(): void

  • 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

onRemoveMouseDown

onSelectTransitionDone