diff --git a/en/components/chip.md b/en/components/chip.md index c961fcdd4..174894916 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -6,11 +6,10 @@ _keywords: Angular Chip, Angular Chip Component, Angular Chip Area, Angular Chip # Angular Chip Component Overview -

[The Angular Chip component]({environment:angularApiUrl}/classes/igxchipcomponent.html) is a visual element that displays information in an oval container. The component has various properties - it can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other, using the chip area as a container.

+

The Angular Chip component is a visual element that displays information in an oval container. The component has various properties - it can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other, using the chip area as a container.

## Angular Chip Example - @@ -124,82 +123,17 @@ public chipRemoved(event: IBaseChipEventArgs) { ### Dragging -Dragging can be enabled by setting the [`draggable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#removable) input to `true`. When enabled, you can click and drag the chip around. +Dragging can be enabled by setting the [`draggable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#draggable) input to `true`. When enabled, you can click and drag the chip around. ```html - {{chip.icon}} - {chip.text}} - -``` - ->[!NOTE] ->To reorder the chips you need to handle the event using the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html). - -
- -**To create the demo sample, we will use the features above:** - -```html - {{chip.icon}} {{chip.text}} ``` -Then, we need to add the `chipList` and the function, that handles the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event: - -```ts -import { IBaseChipEventArgs } from 'igniteui-angular'; -// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package -... -public chipList = [ - { - text: 'Country', - id: '1', - icon: 'place' - }, - { - text: 'City', - id: '2', - icon: 'location_city' - }, - { - text: 'Town', - id: '3', - icon: 'store' - }, - { - text: 'First Name', - id: '4', - icon: 'person_pin' - } -]; - -private changeDetectionRef: any; - -public chipRemoved(event: IBaseChipEventArgs) { - this.chipList = this.chipList.filter((item) => { - return item.id !== event.owner.id; - }); - this.changeDetectionRef.detectChanges(); -} -``` - -If everything went well, you should see this in your browser: - - - - - +>[!NOTE] +>To reorder the chips you can handle the event using the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html). More about it could be found in [`Reorder Chips section`](chip.md#reorder-chips). ### Chip Templates @@ -266,6 +200,71 @@ You can customize the `remove icon`, using the [`removeIcon`]({environment:angul ``` +
+ +### Demo + +To create the demo sample below, we will use the features above: + +```html + + {{chip.icon}} + {{chip.text}} + +``` + +Then, we need to add the `chipList` and the function, that handles the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event: + +```ts +import { IBaseChipEventArgs } from 'igniteui-angular'; +// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package +... +public chipList = [ + { + text: 'Country', + id: '1', + icon: 'place' + }, + { + text: 'City', + id: '2', + icon: 'location_city' + }, + { + text: 'Town', + id: '3', + icon: 'store' + }, + { + text: 'First Name', + id: '4', + icon: 'person_pin' + } +]; + +private changeDetectionRef: any; + +public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => { + return item.id !== event.owner.id; + }); + this.changeDetectionRef.detectChanges(); +} +``` +If everything went well, you should see this in your browser: + + + + + ## Chip Area The [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation, etc.). diff --git a/jp/components/chip.md b/jp/components/chip.md index 90aa89499..a101aa47a 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -125,7 +125,7 @@ public chipRemoved(event: IBaseChipEventArgs) { ### ドラッグ -ドラッグは、[`draggable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#removable) 入力を `true` に設定して有効にできます。有効にすると、チップをクリックしてドラッグできます。 +ドラッグは、[`draggable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#draggable) 入力を `true` に設定して有効にできます。有効にすると、チップをクリックしてドラッグできます。 ```html