Ignite UI for Angular

igxMask ディレクティブによる入力桁数の制限

Ignite UI for Angular 11.1.4バージョン時点での情報に基づいています。 igxMask ディレクティブを利用することで、入力コントロールに対して入力できる桁数の制限をかけることができます。文字 […]

IgxGridのIgxGridToolbarの表示・非表示を動的に切り替えるには、Angularの*ngIfなどの仕組みを使って表示を切り替えたあと、IgxGridのreflowメソッドとmarkForCheckメソッド […]

IgxGridのIgxGridToolbarの高さを狭めたい場合は、 IgxGridToolbarのdisplayDensityを”compact”などにする。もしくは CSSでheightを直 […]

数値軸の表示ラベルを3桁ごとのカンマ区切りで表示するには、軸のformatLabelにfunctionを指定してください。そのfunctionに渡されてくる第1引数には軸に表示されるラベル（※数値軸の場合は、number […]

IgxGridで選択されている行のデータを取得するには、 IgxGridComponentのselectedRowsで選択行のIDの配列を取得する。 1で取得した配列の各要素に対して、IgxGridComponentのg […]

この KB は製品バージョン 11.1.4 をベースにしています。 IgxRadio の選択項目を TypeScript 側で設定するサンプルです。IgxRadio の ngModel に選択したい値をバインドします。

IgxDataChartの目盛り線を表示するには、軸のtickLengthの値を1以上にしてください。なお、目盛り線の色を指定する場合は、tickStrokeで色を指定してください。既定の色は薄い灰色です。　実行結 […]

IgxDataChartのチャート内のグリッド線を消すには、軸のmajorStrokeをtransparentにする、もしくは、majorStrokeThicknessを0にすると消すことができます。　実行結果 X軸 […]

IgxDataChartでツールチップに表示される内容をカスタマイズする場合は、Angularのng-tempateを使用してカスタマイズしたい内容でテンプレートを作成し、シリーズのtooltipTemplateのその参 […]

igxTooltip を利用することで、UI 要素にツールチップを追加することができます。今回は、igxGrid のセルに igxTooltip を適用して、ツールチップを表示します。下記、実装例です。div#targ […]