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>
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)">
Stores data related to the chip.
<igx-chip [data]="{ value: 'Country' }"></igx-chip>
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>
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;
}
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)">
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)">
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)">
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)">
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>
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>
Sets the value of id attribute. If not provided it will be automatically generated.
<igx-chip [id]="'igx-chip-1'"></igx-chip>
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)">
Emits an event when the IgxChipComponent moving ends.
Returns the moved IgxChipComponent.
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveEnd)="moveEnded($event)">
Emits an event when the IgxChipComponent moving starts.
Returns the moving IgxChipComponent.
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveStart)="moveStarted($event)">
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>
Emits an event when the IgxChipComponent is removed.
Returns the removed IgxChipComponent.
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (remove)="remove($event)">
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>
Returns the role attribute of the chip.
let chipRole = this.chip.role;
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>
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>
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)">
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)">
Sets/gets the variant of the chip.
Allowed values are primary, info, success, warning, danger.
Providing an invalid value won't change the chip.
<igx-chip [variant]="success"></igx-chip>
Returns the background color of the IgxChipComponent.
@ViewChild('myChip')
public chip: IgxChipComponent;
ngAfterViewInit(){
let chipColor = this.chip.color;
}
Sets the IgxChipComponent background color.
The color property supports string, rgb, hex.
<igx-chip #myChip [id]="'igx-chip-1'" [color]="'#ff0000'"></igx-chip>
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
An accessor that returns the resource strings.
An accessor that sets the resource strings. By default it uses EN resources.
Returns if the IgxChipComponent is selected.
@ViewChild('myChip')
public chip: IgxChipComponent;
selectedChip(){
let selectedChip = this.chip.selected;
}
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">
Sets the value of tabindex attribute. If not provided it will use the element's tabindex if set.
<igx-chip [id]="'igx-chip-1'" [tabIndex]="1"></igx-chip>
Sets the --component-size CSS variable based on the value of Display Density
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