An @Input property that stores data related to the chip.
<igx-chip [data]="{ value: 'Country' }"></igx-chip>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.
<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;
}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.
<igx-chip [id]="'igx-chip-1'" [draggable]="true"></igx-chip>An @Input property that 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>An @Input property that 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 is clicked.
Returns the clicked IgxChipComponent, whether the event should be canceled.
chipClick(event: IChipClickEventArgs){
let clickedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onClick)="chipClick($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.
chipEnter(event: IChipEnterDragAreaEventArgs){
let targetChip = event.targetChip;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onDragEnter)="chipEnter($event)">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.
chipKeyDown(event: IChipKeyDownEventArgs){
let keyDown = event.key;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onKeyDown)="chipKeyDown($event)">Emits an event when the IgxChipComponent moving ends.
Returns the moved IgxChipComponent.
moveEnded(event: IBaseChipEventArgs){
let movedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onMoveEnd)="moveEnded($event)">Emits an event when the IgxChipComponent moving starts.
Returns the moving IgxChipComponent.
moveStarted(event: IBaseChipEventArgs){
let movingChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onMoveStart)="moveStarted($event)">Emits an event when the IgxChipComponent is removed.
Returns the removed IgxChipComponent.
remove(event: IBaseChipEventArgs){
let removedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onRemove)="remove($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.
chipSelect(event: IChipSelectEventArgs){
let selectedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelection)="chipSelect($event)">Emits event when the IgxChipComponent is selected/deselected and any related animations and transitions also end.
chipSelectEnd(event: IBaseChipEventArgs){
let selectedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelectionDone)="chipSelectEnd($event)">An @Input property that 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>An @Input property that 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>An @Input property that 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>An @Input property that 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>Returns the background color of the IgxChipComponent.
@ViewChild('myChip')
public chip: IgxChipComponent;
ngAfterViewInit(){
let chipColor = this.chip.color;
}An @Input property that 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.
Returns if the IgxChipComponent is selected.
@ViewChild('myChip')
public chip: IgxChipComponent;
selectedChip(){
let selectedChip = this.chip.selected;
}Two-way data binding:
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">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">
An @Input property that 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>