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