インフラジスティックスIgnite UI for Angular 10.1の新機能紹介

# Ignite UI for Angular 10.1の新機能一覧

<p><a href="https://github.com/IgniteUI/igniteui-angular" rel="noopener noreferrer" target="_blank">Ignite UI for Angular</a> 10.1は、Angularフレームワークのバージョン10に対応したUIコントロールライブラリーとして、2020年8月にリリースされました。開発元は<a href="https://jp.infragistics.com/" rel="noopener noreferrer" target="_blank">インフラジスティックス</a>という会社です。</p>

<p>Ignite UI for Angular 10.1で新規導入された機能は以下の通りです。全リストは<a href="https://blogs.jp.infragistics.com/entry/2020/08/18/203412" rel="noopener noreferrer" target="_blank">こちら</a>または<a href="https://github.com/IgniteUI/igniteui-angular/releases/tag/10.1.0" rel="noopener noreferrer" target="_blank">GitHubのリリースノート</a>に載っています。</p>

<ul>
	<li>IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
	<ul>
		<li>cellEditDoneイベントとrowEditDoneイベントの導入</li>
		<li>親行縮小時の集計行表示制御機能追加</li>
		<li>データセルのツールチップ表示対応</li>
		<li>ネストされたデータのバインドでのパス指定対応</li>
		<li>IgxGridStateによる展開状態、列選択、行のピン固定のサポート追加</li>
		<li>IgxGridStateによるIgxTreeGrid、IgxHierarchicalGridのサポート追加</li>
		<li>（IgxGridのみ）boolean列のデータ表示形式がチェックアイコンと×アイコンになりました。</li>
		<li>列のautosizeメソッドに、ヘッダーコンテンツの幅のみで調整可能とする引数追加</li>
	</ul>
	</li>
	<li>IgxCombo
	<ul>
		<li>onSearchInputイベントのキャンセル可能化</li>
		<li>検索窓に大文字小文字区別アイコンを追加</li>
	</ul>
	</li>
	<li>IgxOverlay
	<ul>
		<li>［ESC］キー押下でオーバーレイを閉じるかどうかを指定するオプション追加</li>
	</ul>
	</li>
	<li>IgxToast、IgxSnackbar
	<ul>
		<li>showメソッドに、表示するメッセージを指定する引数追加</li>
	</ul>
	</li>
	<li>IgxNavBar
	<ul>
		<li>タイトルバーのカスタマイズ機能</li>
	</ul>
	</li>
	<li>IgxCalendar、IgxMonthPicker
	<ul>
		<li>viewDateChangedイベントの追加</li>
		<li>activeViewChangedイベントの追加</li>
		<li>activeViewプロパティのSetter追加</li>
	</ul>
	</li>
	<li>IgxButton
	<ul>
		<li>フローティング アクションボタンをサポートするスタイルの追加</li>
	</ul>
	</li>
</ul>

# 新機能の一部を簡単に紹介

## IgxGridStateディレクティブによるグリッドの状態保存、復元

<p>IgxGridStateディレクティブの機能が拡張され、IgxGridだけでなく、IgxTreeGridとIgxHierarchicalGridでも状態の保存及び復元が可能になりました。</p>

![igxGridStateによる状態保存と復元](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/27483449-5687-0410-dfd6-8e9c204d77a8.gif)


<p>KB記事:</p>

<p><a href="https://kb.jp.infragistics.com/?p=3999" rel="noopener noreferrer" target="_blank">https://kb.jp.infragistics.com/?p=3999</a><br />
<a href="https://kb.jp.infragistics.com/?p=4027" rel="noopener noreferrer" target="_blank">https://kb.jp.infragistics.com/?p=4027</a></p>

## 親行縮小時の集計行表示制御機能追加（IgxGrid、IgxTreeGrid、IgxHierarchicalGrid）

<p>グループ行や親行を縮小したときに、子行の集計行を表示するかどうかが制御可能になりました。制御するプロパティはshowSummaryOnCollapseで、このプロパティの値がtrueの時は表示、falseの時は非表示、となります。デフォルト値はfalseです。</p>

![親行縮小時の集計行表示制御機能追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/24d1d705-a449-d558-67a1-8e6b229cda2d.gif)


<p>KB記事:&nbsp;<a href="https://kb.jp.infragistics.com/?p=4121" rel="noopener noreferrer" target="_blank">https://kb.jp.infragistics.com/?p=4121</a></p>

## データセルのツールチップ表示対応（IgxGrid、IgxTreeGrid、IgxHierarchicalGrid）

<p>データセルにマウスカーソルをホバーしたときに、値をツールチップに表示できるようになりました。ng-templateを使用してセルの要素にtitle属性を設定することにより、表示するテキストをカスタマイズすることも可能です。</p>

![データセルのツールチップ対応](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/55154784-bc47-aa07-f8d7-f4f8f7e3c12a.png)


<p>KB記事:&nbsp;<a href="https://kb.jp.infragistics.com/?p=4123" rel="noopener noreferrer" target="_blank">https://kb.jp.infragistics.com/?p=4123</a></p>

## ネストされたデータのバインドでのパス指定対応（IgxGrid、IgxTreeGrid、IgxHierarchicalGrid）

<p>グリッドに子階層があるデータをバインドするときに、子階層のデータをそのままパス形式で列にバインドすることができるようになりました。</p>

```typescript
// データ構造（例）
this.data = [
  {
    Code: "13000", Prefecture: "東京都",
    Population: { Total: 13515271, Men: 6666690, Female: 6848581 }
  },
  {
    Code: "14000", Prefecture: "神奈川県",
    Population: { Total: 9126214, Men: 4558978, Female: 4567236 }
  },
  {
    Code: "11000", Prefecture: "埼玉県",
    Population: { Total: 7266534, Men: 3628418, Female: 3638116 }
  },
  {
    Code: "12000", Prefecture: "千葉県",
    Population: { Total: 4621965, Men: 2303871, Female: 2318094 }
  },
]
```

```html
<!-- バインド例 -->
<igx-grid #grid1 [data]="data" height="400px" width="100%" [autoGenerate]="false">
  <igx-column field="Code" header="地域コード">
  </igx-column>
  <igx-column field="Prefecture" header="都道府県名">
  </igx-column>
  <igx-column <strong>field="Population.Total"</strong> header="人口(総数)" dataType="number">
  </igx-column>
  <igx-column <strong>field="Population.Men"</strong> header="人口(男)" dataType="number">
  </igx-column>
  <igx-column <strong>field="Population.Female"</strong> header="人口(女)" dataType="number">
  </igx-column>
</igx-grid>

```

<p>KB記事:&nbsp;<a href="https://kb.jp.infragistics.com/?p=3972" rel="noopener noreferrer" target="_blank">https://kb.jp.infragistics.com/?p=3972</a></p>

## 列のautosizeメソッドに、ヘッダーコンテンツの幅のみで調整可能とする引数追加（IgxGrid、IgxTreeGrid、IgxHierarchicalGrid）

<p>以前から列の<code>autosize()</code>メソッドで列幅を表示テキストの長さに合わせて調整できていたのですが、Ignite UI for Angular 10.1でこのメソッドに引数が加わり、ヘッダーのテキストの長さに合わせるか、それとも、ヘッダーとセルの両方のテキストの長さに合わせるか、を指定できるようになりました。引数にtrueを渡せばヘッダーのテキストの長さに合わせ、falseを渡せばヘッダーとセルの両方のテキストの長さに合わせて列幅が調整されます。デフォルトはfalseです。</p>

```typescript
// コード例
@ViewChild("grid1", { read: IgxGridComponent, static: true })
public grid1: IgxGridComponent;
....
this.grid1.columnList.forEach(column =&gt; {
  column.autosize(true);
});
```

![autosizeメソッドのbyHeaderパラメーター](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/5885a8b0-436c-cae4-bf8c-3b27bbf089e0.png)


<p>KB記事:&nbsp;<a href="https://kb.jp.infragistics.com/?p=4125" rel="noopener noreferrer" target="_blank">https://kb.jp.infragistics.com/?p=4125</a></p>

## 検索窓に大文字小文字区別アイコンを追加（IgxCombo）

<p>IgxComboの検索窓に大文字と小文字を区別して検索するかどうかのアイコンが追加されました。showSearchCaseIconプロパティで表示するかどうかを指定でき、trueでアイコン表示、falseでアイコン非表示です。アイコンをクリックすると、区別するかどうかが切り替わります。</p>

![IgxCombo大文字小文字区別アイコン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/37c1dac5-07de-0a75-187d-6841af044597.png)


<p>KB記事:&nbsp;<a href="https://kb.jp.infragistics.com/?p=4094" rel="noopener noreferrer" target="_blank">https://kb.jp.infragistics.com/?p=4094</a></p>

# 最後に

<p>以上、インフラジスティックスのIgnite UI for Angular 10.1の新機能の紹介をしました。</p>
<p>Ignite UI for Angularが気になった方は<a href="https://jp.infragistics.com/about-us/contact-us" rel="noopener noreferrer" target="_blank">インフラジスティックス</a>までお問い合わせください。</p>