syncfusion-angular-listview

Syncfusion Angular ListView の実装

Syncfusion Angular ListView コンポーネントは、リスト形式でデータを表示するための、機能豊富でインタラクティブなコンポーネントです。データバインディング、グループ化、ネストされたリスト、カスタムテンプレート、選択モード、ドラッグアンドドロップ、大規模なデータセット向けの仮想化、包括的なアクセシビリティ機能を標準でサポートしています。このコンポーネントは本番環境ですぐに使用でき、モダンでデータ駆動型のユーザーインターフェイスの作成に適しています。

このスキルを使用する場面

このスキルは、次の場合に使用します。

• Angular でインタラクティブなリストベースのインターフェイスを構築する
• ローカルまたはリモートのソースからデータを表示する
• グループ化されたリスト構造やネストされたリスト構造を作成する
• テンプレートを使用してリスト項目の外観をカスタマイズする
• 項目の選択やユーザー操作を処理する
• 特殊なパターン（チャットウィンドウ、チェックリスト、デュアルリスト）を実装する
• 大規模なデータセットを仮想化してパフォーマンスを最適化する
• アクセシブルなリストインターフェイスを構築する

コンポーネントの概要

パッケージ： @syncfusion/ej2-angular-lists

主な機能：

• ✅ ローカルおよびリモートのデータバインディング（配列、DataManager、OData、REST API）
• ✅ グループ化とネストされたリスト階層
• ✅ 柔軟な項目、ヘッダー、グループのテンプレート
• ✅ チェックボックスによる単一／複数選択モード
• ✅ 包括的なイベントシステム（選択、クリック、削除、追加、除去）
• ✅ 項目の並べ替え用ドラッグアンドドロップ
• ✅ 大規模なデータセット（1000 件以上の項目）向けの仮想化
• ✅ AJAX コンテンツの読み込みと動的テンプレート
• ✅ ページングの統合サポート
• ✅ 包括的なテーマ設定とスタイル設定のオプション
• ✅ WCAG アクセシビリティへの準拠

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• Angular CLI のセットアップとプロジェクトの設定
• @syncfusion/ej2-angular-lists パッケージのインストール
• CSS テーマとスタイルの追加
• 最初の ListView コンポーネントの作成
• 最小限のサンプルによる基本的なデータバインディング
• アプリケーションの実行（ng serve）

データバインディング

📄 参照： references/data-binding.md

• ローカルデータ配列（文字列、オブジェクト）のバインド
• フィールドの設定とデータマッピング
• DataManager によるリモートデータバインディング
• OData および REST API の統合
• 動的なデータ更新とリフレッシュ方法
• フィールドのプロパティ：id、text、isChecked、enabled、tooltip、groupBy

カスタマイズとテンプレート

📄 参照： references/customization-and-templates.md

• ボタンや検索バーを使ったヘッダーテンプレートのカスタマイズ
• アバター、バッジ、複数行レイアウトを備えた項目テンプレート
• 動的コンテンツを使用したグループヘッダーテンプレート
• デバイスや画面サイズに応じた動的テンプレート
• 組み込みの CSS クラス（e-list-template、e-list-wrapper、e-list-avatar など）
• データバインディングを使った高度なテンプレートパターン

グループ化とネストされたリスト

📄 参照： references/grouping-and-nested-lists.md

• groupBy フィールドによるカテゴリ別の項目のグループ化
• グループヘッダーとテンプレートのカスタマイズ
• 階層データ用のネストされたリスト構造の作成
• 子データのバインドと展開可能なグループ
• 項目数を含むグループヘッダーのカスタマイズ

選択と項目の管理

📄 参照： references/selection-and-items.md

• 選択モード（単一、複数、チェックボックス）
• getSelectedItems() メソッドによる選択項目の取得
• addItem() による項目の動的な追加
• removeItem() による項目の除去
• イベント処理（select、actionComplete）
• プログラムによる選択と選択解除

高度な機能

📄 参照： references/advanced-features.md

• 大規模なデータセットで高いパフォーマンスを実現する仮想化
• スクロールとスクロール位置の管理
• 項目の並べ替え用ドラッグアンドドロップ
• リスト項目のフィルタリングと検索
• ListView へのページャーコンポーネントの統合
• データ取得中の読み込み状態とスピナー
• リスト項目への AJAX コンテンツの読み込み

特化したユースケース

📄 読む： references/specialized-use-cases.md

• チャットウィンドウのレイアウトの構築
• チェックボックス付きチェックリストインターフェースの作成
• デュアルリスト（転送リスト）コンポーネントの構築
• ListView を使用したグリッドベースのレイアウトの作成
• ハイパーリンク付きナビゲーションリストの表示
• 動的なタグやバッジによるカスタマイズ
• モバイルの連絡先レイアウトパターン

スタイルとテーマ

📄 読む： references/styling-and-themes.md

• テーマのインポート（Material3、Bootstrap、Fabric、Tailwind）
• CSS クラスのカスタマイズと上書き
• リスト項目とグループのカスタムスタイリング
• レスポンシブデザインとモバイル向けの最適化
• アニメーション設定とトランジション
• RTL（右から左）への対応
• ダークモードのテーマ設定

項目数とグループヘッダー

📄 読む： references/item-count-and-grouping.md

• グループヘッダーへの項目数の表示
• 項目数の動的な計算と更新
• グループの統計と集計
• 高度なグループヘッダーテンプレート
• 条件に応じた項目数の表示

アクセシビリティ

📄 読む： references/accessibility.md

• WCAG 2.1 への準拠とキーボード操作
• ARIA 属性とスクリーンリーダーへの対応
• フォーカスの管理とインジケーター
• キーボードショートカットとナビゲーションパターン
• 色のコントラストとアクセシブルなテーマ設定
• 支援技術を使ったアクセシビリティのテスト

API リファレンス全編

📄 読む： references/api-reference.md

• プロパティ：animation、enablePersistence、enableRtl、locale、query など
• メソッド：back()、checkAllItems()、selectMultipleItems()、およびメソッド一式
• イベント：select、scroll、actionBegin、actionComplete、actionFailure と引数の詳細
• 各 API の完全な実行例
• プロパティ、メソッド、イベントのクイックリファレンステーブル

---

クイックスタートの例

import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { Component } from '@angular/core';

@Component({
  imports: [ListViewModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-listview 
      id='sample-list' 
      [dataSource]='data'>
    </ejs-listview>
  `
})
export class AppComponent {
  // Simple string data
  public data: string[] = [
    'Artwork', 'Abstract', 'Modern Painting', 
    'Ceramics', 'Animation Art', 'Oil Painting'
  ];
}

CSS のインポート（styles.css 内）：

@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-angular-lists/styles/material3.css";

実行：

npm install @syncfusion/ej2-angular-lists --save
ng serve --open

---

一般的なパターン

パターン 1：フィールドマッピングを使用したデータ駆動型リスト

複数のプロパティを持つ複雑なオブジェクトを表示する場合に使用します。

public data = [
  { name: 'John', email: '[email protected]', id: '1' },
  { name: 'Jane', email: '[email protected]', id: '2' }
];
public fields = { text: 'name', id: 'id' };

パターン 2：グループ化されたリスト

項目をカテゴリ別に整理する場合に使用します。

public fields = { text: 'name', groupBy: 'department' };

パターン 3：テンプレートを使用したリスト

カスタムレイアウトが必要な場合に使用します。

<ejs-listview [dataSource]='data' cssClass='e-list-template'>
  <ng-template #template let-data="">
    <div class="e-list-wrapper">
      <span>{{ data.name }}</span>
    </div>
  </ng-template>
</ejs-listview>

パターン 4：チェックボックスによる選択

ユーザーが複数の項目を選択する必要がある場合に使用します。

<ejs-listview [dataSource]='data' [showCheckBox]='true'></ejs-listview>

パターン 5：動的な追加／削除

対話型のリスト管理に使用します。

addItem() {
  this.listview.addItem([{ text: 'New Item', id: 'new' }]);
}
removeItem(element: HTMLElement) {
  this.listview.removeItem(element);
}

---

主なプロパティと設定

プロパティ	型	説明
dataSource	array/DataManager	リストに表示するデータ
fields	object	フィールドのマッピング（text、id、groupBy など）
template	string/function	リスト項目のカスタムテンプレート
headerTemplate	string/function	カスタムヘッダーテンプレート
groupTemplate	string/function	カスタムグループヘッダーテンプレート
showCheckBox	boolean	選択用のチェックボックスを表示します（デフォルト：false）
showHeader	boolean	ListView のヘッダーを表示します（デフォルト：false）
headerTitle	string	ヘッダーのタイトル
enableVirtualization	boolean	大規模なデータセット向けの仮想スクロールを有効にします
enableHtmlSanitizer	boolean	HTML コンテンツをサニタイズします（デフォルト：true）
allowDragAndDrop	boolean	ドラッグ＆ドロップによる並べ替えを有効にします
select	event	項目が選択されたときに発生します
actionComplete	event	追加／削除操作の後に発生します

---

よくあるユースケース

1. タスクマネージャー - チェックボックスやドラッグ＆ドロップを使った動的な追加・削除
2. 連絡先ディレクトリ - 部門ごとにグループ化された複数行のテンプレート
3. チャットインターフェース - アバターとタイムスタンプを備えたカスタムテンプレート
4. 製品カタログ - 数千件の製品に対応する仮想化
5. ナビゲーションメニュー - アイコンとルーティングを備えたネストされたリスト
6. チェックリスト - ヘッダーに選択数を表示するチェックボックス選択
7. 2 つのリスト間の転送 - 移動操作を備えた 2 つの ListView
8. モバイルナビゲーション - タッチ操作に適したレスポンシブなリストレイアウト

---

次のステップ

• まずはこちら： はじめに
• データをバインドする： データバインディング
• インタラクティブに構築する： 選択と項目
• パフォーマンスを最適化する： 高度な機能
• 高度なパターン： 特殊なユースケース

API リファレンスと詳細なドキュメントについては、Syncfusion Angular ListView APIをご覧ください。