Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(chip): remove duplicated dragging section #5999

Open
wants to merge 10 commits into
base: vnext
Choose a base branch
from
139 changes: 69 additions & 70 deletions en/components/chip.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ _keywords: Angular Chip, Angular Chip Component, Angular Chip Area, Angular Chip

# Angular Chip Component Overview

<p class="highlight">[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.</p>
<p class="highlight">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.</p>

## Angular Chip Example


<code-view style="height: 100px; padding-top: 10px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/data-display/chip-simple" alt="Angular Chip Example">
Expand Down Expand Up @@ -124,82 +123,17 @@ public chipRemoved(event: IBaseChipEventArgs) {

### Dragging
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see duplicate section of this one. We'll lose this content if removed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The chip draggable property is also mentioned in the Reorder Chips section

Copy link
Contributor

@dkamburov dkamburov Nov 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added @skrustev for a review, he can tell if this section was added for a reason

Copy link
Member

@skrustev skrustev Jan 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is fine for the section to be left as is. It is mentioned with the Chip Area, but it is a standalone thing to the chip itself. The part describing the demo though should definitely be somewhere else imo. I think moving it to a separate section after the Chip Templates section should suffice.

I noticed though the draggable link points to the removable property.
Also I think having a link to the Chip Area Reorder Chips section here would also be nice. The IgxChipsAreaComponent note says it is needed, but that is not required. The user could implement its own thing even without the Chip Area. So I think mentioning it as an option with the link to the Reorder Chips would be much better replacement for the note.


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
<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{chip.text}}
</igx-chip>
```

>[!NOTE]
>To reorder the chips you need to handle the event using the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html).

<div class="divider"></div>

**To create the demo sample, we will use the features above:**

```html
<igx-chip
*ngFor="let chip of chipList"
[id]="chip.id"
[selectable]="true"
[removable]="true"
(remove)="chipRemoved($event)"
>
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
```

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:


<code-view style="height: 100px; padding-top: 10px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/data-display/chip-simple" >
</code-view>

>[!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

Expand Down Expand Up @@ -266,6 +200,71 @@ You can customize the `remove icon`, using the [`removeIcon`]({environment:angul
</ng-template>
```

<div class="divider"></div>

### Demo

To create the demo sample below, we will use the features above:

```html
<igx-chip
*ngFor="let chip of chipList"
[id]="chip.id"
[selectable]="true"
[removable]="true"
(remove)="chipRemoved($event)"
>
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
```

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:


<code-view style="height: 100px; padding-top: 10px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/data-display/chip-simple" >
</code-view>

## 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.).
Expand Down
2 changes: 1 addition & 1 deletion jp/components/chip.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true">
Expand Down
Loading