---
title: Angular Chip コンポーネント - Ignite UI for Angular | インフラジスティックス | MITライセンス
description: Ignite UI for Angular Chip コンポーネントは入力、属性、または操作を表す小さい要素を提供します。
keywords: Angular Chip, Angular Chip コンポーネント, Angular Chip Area, Angular Chip Area, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, Angular UI コンポーネント
license: MIT
_language: ja
---

# Angular Chip (チップ) コンポーネントの概要

は、楕円形のコンテナーに情報を表示する視覚的要素です。コンポーネントにはテンプレート化、削除、選択などのさまざまなプロパティがあります。複数のチップの順序を変更し、チップ領域をコンテナーとして視覚的に接続できます。

## Angular Chip の例

<hr/>

## Ignite UI for Angular Chip を使用した作業の開始

Ignite UI for Angular Chip コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

```cmd
ng add igniteui-angular
```

Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。

次に、**app.module.ts** ファイルに **IgxChipsModule** をインポートします。

```typescript
// app.module.ts

// import { IgxChipsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxChipsModule],
    ...
})
export class AppModule {}
```

あるいは、`16.0.0` 以降、`IgxChipComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_CHIPS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/chips/src/chips/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

```typescript
// home.component.ts

// import { IGX_CHIPS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <igx-chip *ngFor="let chip of chipList" [id]="chip.id">
      {{ chip.text }}
    </igx-chip>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_CHIPS_DIRECTIVES, NgFor],
})
export class HomeComponent {
  public chipList = [
    { text: 'Country', id: '1', icon: 'place' },
    { text: 'City', id: '2', icon: 'location_city' },
    { text: 'Address', id: '3', icon: 'home' },
    { text: 'Street', id: '4', icon: 'streetview' },
  ];
}
```

Ignite UI for Angular Chips モジュールまたはディレクティブをインポートしたので、`igx-chip` コンポーネントの使用を開始できます。

## Angular Chip コンポーネントの使用

には、入力があるため、他のチップと簡単に識別できます。がない場合は自動的に生成します。

```html
<igx-chip *ngFor="let chip of chipList" [id]="chip.id">
  {{chip.text}}
</igx-chip>
```

## バリアント

Angular チップは、いくつかの定義済みスタイル バリアントをサポートしています。入力プロパティにサポートされている値のいずれか (`primary`、`info`、`success`、`warning`、または `danger`) を割り当てることで、バリアントを変更できます。

```html
<igx-chip variant="success">Success</igx-chip>
```

### 選択

<Image src={selectingDefault} alt="Selecting Default" class="responsive-img" />

選択は、入力を `true` に設定して有効にできます。チップを選択すると、イベントが発生します。新しい 値を提供することにより、新しいステートとこの選択の変更をトリガーした の元のイベントを取得できます。プロパティをプログラムで設定して行う場合、引数に値 `null` になります。

```html
<igx-chip *ngFor="let chip of chipList" [selectable]="true">
  <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
  {{chip.text}}
</igx-chip>
```

<DocsAside type="info">
このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
</DocsAside>

### 削除

<Image src={removingDefault} alt="Removing Default" class="responsive-img" />

削除は、入力を `true` に設定して有効にできます。有効な場合は、チップの最後に削除ボタンが描画されます。チップを削除すると、イベントが発生します。

デフォルトで、チップは削除アイコンをクリックしても DOM ツリーから自動的に削除されません。削除は手動で処理する必要があります。

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

```typescript
public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}
```

### ドラッグ

ドラッグは、入力を `true` に設定して有効にできます。有効にすると、チップをクリックしてドラッグできます。

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

<DocsAside type="info" title="情報">
チップの順序をソートするには、を使用してイベントを処理する必要があります。
</DocsAside>

<igc-divider></igc-divider>

**デモ サンプルを作成するには、上記の機能を使用します。**

```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>
```

次に、`chipList` と イベントを処理する関数を追加します。

```ts
// 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();
}
```

すべて適切に設定できると、ブラウザーで以下が表示されます。

### Chip テンプレート

のすべての要素がテンプレート化できます。

`IgxPrefix` と `IgxSuffix` ディレクティブを使用して、チップの `prefix` と `suffix` をテンプレート化できます。

<Image src={prefixSuffix} alt="Chip Prefix and Suffix" class="responsive-img" />

```html
<igx-chip>
  <igx-icon igxPrefix>insert_emoticon</igx-icon>
  <igx-icon igxSuffix style="transform: rotate(180deg)">insert_emoticon</igx-icon>
  <span>Why not both?</span>
</igx-chip>
```

[`--ig-size`] CSS 変数を使用して、チップのサイズをカスタマイズできます。デフォルトでは、`var(--ig-size-large)` に設定されています。`var(--ig-size-medium)` または `var(--ig-size-small)` に設定することもできますが、チップ内のすべての要素は相対的な位置を保持します。

<Image src={density} alt="Chip Density" class="responsive-img" />

```html
<igx-chip>Hi! My name is Chip!</igx-chip>

<igx-chip style="--ig-size: var(--ig-size-medium)">
  I can be smaller!
</igx-chip>

<igx-chip style="--ig-size: var(--ig-size-small)">
  <igx-icon igxPrefix>child_care</igx-icon>
  Even tiny!
</igx-chip>
```

`select icon` をカスタマイズするには、入力を使用します。`TemplateRef` 型の値を受け取り、同じ機能を保持する際にデフォルト アイコンをオーバーライドします。

<Image src={selectingCustom} alt="Selecting Custom" class="responsive-img" />

```html
<igx-chip *ngFor="let chip of chipList" [selectable]="true" [selectIcon]="mySelectIcon">
  <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
  {{chip.text}}
</igx-chip>

<ng-template #mySelectIcon>
  <igx-icon>check_circle</igx-icon>
</ng-template>
```

`remove icon` をカスタマイズするには、入力を使用します。`TemplateRef` 型の値を取得してデフォルトの削除アイコンの代わりに描画します。

<Image src={removeIcons} alt="Remove Icons" class="responsive-img" />

```html
<igx-chip *ngFor="let chip of chipList" [removable]="true" [removeIcon]="myRemoveIcon">
  <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
  {{chip.text}}
</igx-chip>

<ng-template #myRemoveIcon>
  <igx-icon>delete</igx-icon>
</ng-template>
```

<igc-divider></igc-divider>

### デモ

デモ サンプルを作成するには、上記の機能を使用します。

```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>
```

次に、`chipList` と イベントを処理する関数を追加します。

```ts
// 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();
}
```

すべて適切に設定できると、ブラウザーで以下が表示されます。

## Chip Area

はチップの間の操作 (ドラッグ、選択、ナビゲーションなど) が必要となる複雑なシナリオの処理で使用されます。

### Chip のソート

<Image src={dragging} alt="Dragging" class="responsive-img" />

チップの位置を変更するため、ユーザーによってドラッグができます。ドラッグはデフォルトで無効になっていますが、入力プロパティを使用して有効にできます。実際のチップのソートは手動で処理する必要があります。チップが別のチップの上にドラッグされる場合に、新しい順序を返す イベントを提供するため、チップ領域が役に立ちます。

```html
<igx-chips-area (reorder)="chipsOrderChanged($event)">
  <igx-chip *ngFor="let chip of chipList" [draggable]="'true'">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
  </igx-chip>
</igx-chips-area>
```

```typescript
public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
    const newChipList = [];
    for (const chip of event.chipsArray) {
        const chipItem = this.chipList.filter((item) => {
            return item.id === chip.id;
        })[0];
        newChipList.push(chipItem);
    }
    this.chipList = newChipList;
}
```

### キーボード ナビゲーション

チップをフォーカスするには `Tab` キーを押すか、それをクリックします。チップがチップ領域にある場合、キーボード ナビゲーションを使用して順序を変更することができます。

- チップがフォーカスされた場合のキーボード コントロール:

  - <kbd>LEFT</kbd> - チップのフォーカスを左へ移動します。

    <Image src={arrowLeftKey} alt="Arrow Left Key" class="responsive-img" />

  - <kbd>RIGHT</kbd> - チップのフォーカスを右へ移動します。

    <Image src={arrowRightKey} alt="Arrow Right Key" class="responsive-img" />

  - <kbd>SPACE</kbd> - チップが選択可能な場合、選択を切り替えます。

    <Image src={spaceKey} alt="Space Key" class="responsive-img" />

  - <kbd>DELETE</kbd> - の イベントをトリガーし、チップ削除が手動で処理されます。
  - <kbd>SHIFT</kbd> + <kbd>LEFT</kbd> - 現在フォーカスされたチップは左に位置を移動した際に の イベントをトリガーします。
  - <kbd>SHIFT</kbd> + <kbd>RIGHT</kbd> - 現在フォーカスされたチップは右に位置を移動した際に の イベントをトリガーします。

- 削除ボタンがフォーカスされた場合のキーボード コントロール:

  - <kbd>SPACE</kbd> または <kbd>ENTER</kbd> チップの削除を手動的に処理するために 出力を発生します。

<hr/>

以下は、IgxAvatar をプレフィックスとして使用し、すべてのチップにカスタム アイコンを使用するチップ領域の例です。

```html
<igx-chips-area (reorder)="chipsOrderChanged($event)">
  <igx-chip
    *ngFor="let chip of chipList"
    [id]="chip.id"
    [selectable]="true"
    [selectIcon]="mySelectIcon"
    [removable]="true"
    [removeIcon]="myRemoveIcon"
    (remove)="chipRemoved($event)"
    [draggable]="'true'">
    <igx-avatar
      class="chip-avatar-resized"
      igxPrefix
      [src]="chip.photo"
      shape="circle">
    </igx-avatar>
    {{chip.name}}
  </igx-chip>
</igx-chips-area>

<ng-template #mySelectIcon>
  <igx-icon>check_circle</igx-icon>
</ng-template>

<ng-template #myRemoveIcon>
  <igx-icon>delete</igx-icon>
</ng-template>
```

チップに合わせてアバターのサイズを変更します。

```scss
.chip-avatar-resized {
  width: 2em;
  height: 2em;
  min-width: 2em;
}
```

`chipList` とイベントを処理する関数を追加します。

```ts
// import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from '@infragistics/igniteui-angular'; for licensed package

...
public chipList = [
    {
        id: '770-504-2217',
        name: 'Terrance Orta',
        photo: 'https://www.infragistics.com/angular-demos/assets/images/men/27.jpg'
    },
    {
        id: '423-676-2869',
        name: 'Richard Mahoney',
        photo: 'https://www.infragistics.com/angular-demos/assets/images/men/13.jpg'
    },
    {
        id: '859-496-2817',
        name: 'Donna Price',
        photo: 'https://www.infragistics.com/angular-demos/assets/images/women/50.jpg'
    }
];

private changeDetectionRef: any;

public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
    const newChipList = [];
    for (const chip of event.chipsArray) {
        const chipItem = this.chipList.filter((item) => {
            return item.id === chip.id;
        })[0];
        newChipList.push(chipItem);
    }
    this.chipList = newChipList;
}
```

すべてが適切に設定されていれば、ブラウザーで以下が表示されます。

### デモ

## スタイル設定

### Chip テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。

| Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$background** | $text-color | The chip text color. |
|  | $border-color | The chip border color. |
|  | $hover-background | The chip hover background color. |
|  | $hover-border-color | The chip hover border color. |
|  | $hover-text-color | The chip hover text color. |
|  | $focus-background | The chip focus background color. |
|  | $selected-background | The chip selected background color. |
| **$focus-background** | $focus-text-color | The chip text focus color. |
|  | $focus-border-color | The chip focus border color. |
|  | $focus-outline-color (bootstrap & indigo variants only) | The chip focus outline color. |
| **$selected-background** | $selected-text-color | The selected chip text color. |
|  | $selected-border-color | The selected chip border color. |
|  | $hover-selected-background | The selected chip hover background color. |
| **$hover-selected-background** | $hover-selected-text-color | The selected chip hover text color. |
|  | $hover-selected-border-color | The selected chip hover border color. |
|  | $focus-selected-background | The selected chip focus background color. |
| **$focus-selected-background** | $focus-selected-text-color | The selected chip text focus color. |
|  | $focus-selected-border-color | The selected chip focus border color. |
|  | $focus-selected-outline-color (bootstrap & indigo variants only) | The chip focus outline color in selected state. |

チップのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する `index` ファイルをインポートする必要があります。

```scss
@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
```

最もシンプルな方法として、を拡張して新しいテーマを作成し、チップの項目をスタイリングします。`$background` または `$selected-background` を指定することで、状態に応じた色や前景の色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。

```scss
$custom-chip-theme: chip-theme(
    $background: #57a5cd,
    $selected-background: #ecaa53,
    $remove-icon-color: #d81414,
    $border-radius: 5px,
);
```

最後に、カスタム テーマをアプリケーションに**含めます**。

```scss
:host {
  @include tokens($custom-chip-theme);
}
```

以下のサンプルでは、カスタマイズした CSS 変数を使用したチップ コンポーネントが、[`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) デザイン システムのチップに視覚的に似たデザインを実現している様子を確認できます。

### Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して chip  をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

```scss
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
```

ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。

- `light-*` クラスはライト テーマ用です。
- `dark-*` クラスはダーク テーマ用です。
- プレフィックスの後にコンポーネント名を追加します (例: `light-chip`、`dark-chip`)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、で確認できます。構文は次のとおりです:

```html
<igx-chip
  class="!light-chip
  ![--background:#99BAA6]
  ![--remove-icon-color:#C92828]"
  ...
>
  {{chip.text}}
</igx-chip>
```

<DocsAside type="info" title="情報">
ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。
</DocsAside>

最終的に、chip は次のようになります:

### カスタム サイズ変更

`igx-chip` を直接ターゲットとして `--size` 変数を使用することができます。

```scss
igx-chip {
  --size: 50px;
}
```

または、ユニバーサル変数 `--ig-chip-size` を使用して、すべてのインスタンスをターゲットにすることもできます。

```html
<div class="my-app">
  <igx-chip></igx-chip>
</div>
```

```scss
.my-app {
  --ig-chip-size: 50px;
}
```

事前定義されたサイズの 1 つを使用して、それを `--ig-size` 変数に割り当てることもできます。`--ig-size` に使用可能な値は、`--ig-size-small`、`--ig-size-medium`、`--ig-size-large` です。

```scss
igx-chip {
  --ig-size: var(--ig-size-small);
}
```

詳細については、[サイズ](display-density.md)の記事をご覧ください。

## API

- - - ## テーマの依存関係

- ## 参照

<hr/>
コミュニティに参加して新しいアイデアをご提案ください。

- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)