What’s New: Ignite UI for Angular 19.2

What’s New: Ignite UI for Angular 19.2

Ignite UI for Angular 19.2 では、SSR (Server Side Rendering) と SSG (Prerendering) のメジャーアップデートに加えて、新しいコンポーネントである Tile Manager Angular導入されています。これらの機能強化の詳細については、こちらをご覧ください。

7min read

Ignite UI for Angular 19.2アップデートがリリースされたことをお知らせできることを嬉しく思います。これにより、Webアプリケーションの構築方法がさらに改善されることをお約束します。これには、次の 2 つの重要な機能強化が含まれています。

機能豊富で高性能なAngularアプリケーションを作り始めるのは、エッグハントゲームではありません。ただ走るだけでいいんだよ:npm update igniteui-angular。

アップデートの内容を見て、何ができるか見てみましょう。

Ignite UI for AngularグリッドのSSR(サーバーサイドレンダリング)とSSG(プリレンダリング)

Ignite UI Angular Gridは、SSR(Server Side Rendering)とSSG(Prerendering)の大幅なアップデートを受けました。以前のバージョンでは、ハイドレーション中に、列やコンテナの幅が変わるなど、さまざまな副作用が発生する可能性がありました。これは、仮想化によるもので、サイズを計算する必要がありました。Ignite UI for Angular 19.2 では、グリッドはすべての内部要素を適切な相対サイズでレンダリングするようになったため、シームレスなクライアント ハイドレーションとその後のデータ バインディングが可能になりました。これらの改善により、ユーザーはより優れたエクスペリエンスを得ることができ、SEOとパフォーマンスクリティカルなSSGまたはSSRをAngularで使用できるようになります。

**注:** データは、すべてのグリッド サイズがピクセル単位で設定されている場合にのみプリレンダリングされます。

Angularタイル マネージャー コンポーネント

​タイルマネージャコンポーネントを使用すると、個々のタイルにコンテンツを表示できます。これにより、ユーザーはこれらのタイルを再配置およびサイズ変更することでこれらのタイルを操作できるため、好みに応じてコンテンツのレイアウトと外観を自由にカスタマイズできます。この柔軟性により、コンテンツを表示および管理するためのよりパーソナライズされた効率的な方法が可能になり、ユーザーエクスペリエンスが向上します。

Angularタイル マネージャー コンポーネント

Ignite UI Tile Manager は、Angularアプリケーションで使用できる標準のWeb コンポーネントです。使用できる2つのコンポーネントを提供します。

  • IgcTileComponent– このコンポーネントは、タイルマネージャー内に表示される個々のタイルを表します。
  • IgcTileManagerComponent– これはすべてのタイル構成要素を含むメインコンポーネントであり、タイル全体のレイアウトのコンテナとして機能します。

タイル マネージャーのプロパティ

列と行

ユーザーとして、タイルマネージャーのグリッド列数を定義できます。これを行うには、単に the propertycolumn-countを希望の列数に設定するだけです。

Gap

ギャップの性質はタイル間の空間を定義します。gapプロパティの値は、数の後に長さ単位(例:px、rem、em、...)でなければなりません。この値はタイル間の横ギャップ(幅)と垂直ギャップ(高さ)の両方に適用されます。

最小幅と最小高さ

はタイルマネージャーで列の最小幅(min-column-width)と行の最小高さ(min-row-height)を設定するプロパティです。ギャップの性質と同様に、これらの性質の値は数値の後に長さ単位が続く必要があります。

タイル マネージャーのプロパティ

Resizing

タイルマネージャーでのサイズ変更は、3つの異なるサイズ変更装飾を使用してタイルのサイズを変更できる機能です。

  • サイドアドライナー:柱のスパンを変更して幅を調整します。
  • ボトム アドライナー: 行のスパンを変更して高さを調整します。
  • コーナー装飾:幅と高さの両方を同時に調整します。

Reorder

タイルマネージャーでは、ドラッグアンドドロップ機能を使用してタイルを並べ替えることができます。デフォルトでは、タイルはドラッグできません。この機能を有効にするには、Tile Manager の drag-mode プロパティを tile または tile-header に設定します。

  • タイルオプションを使用すると、個々のタイルの任意の場所をクリックしたままにすると、ドラッグを開始できます。
  • tile-headerオプションを使用すると、タイルのヘッダーセクションをクリックしたままにするだけで、ドラッグプロセスを開始できます。

Serialization

Web Componentsタイル マネージャーには、タイルのレイアウトの管理に役立つメソッドが用意されています。

  • saveLayout メソッドを使用すると、タイル マネージャの現在のタイルの配置を保存できます。すべてのタイルの現在の順序、サイズ、位置がキャプチャされるため、後でこの正確な構成に復元できます。
  • loadLayout メソッドを使用すると、以前に保存したレイアウトを読み込むことができます。呼び出されると、タイルはレイアウトが保存されたときの正確な状態 (順序、サイズ、位置など) に復元されます。

Styling

また、タイル マネージャーとタイルの 2 つのコンポーネントの外観をカスタマイズすることもできます。Tile Manager は、Tile Manager のベースラッパーのスタイル設定に使用できる base という 1 つの CSS プロパティのみを公開します。Tile コンポーネントは、使用できるいくつかの CSS プロパティを公開します。

Web Components Tile component properties

Web Components Tile コンポーネントには、タイルごとに個別に設定できるプロパティがあることに注意してください。これらのプロパティには、次のようなものがあります。

  • thecol-span propertyは、タイルがレイアウト内で何列にわたって横たわるかを指定し、横方向の大きさをコントロールできます。
  • ​row-spanプロパティはタイルが縦に何行かかるかを決定し、レイアウト内でタイルの高さを調整します。
  • Thecol-startプロパティはタイルが置かれる開始列を指定します。
  • Therow-startプロパティはタイルが置かれる開始行を指定します。
  • ​disable-fullscreenプロパティはデフォルトのフルスクリーンアクションボタンを隠しています。
  • theのpropertydisable-maximizeデフォルトの最大化トグルアクションボタンを隠しています。
  • ​disable-resizeプロパティは、ユーザーがタイルのサイズを変更することを妨げます。
Tile

Ignite UI for Angular 19.2.0 Changelog

​詳細については、こちらをご覧ください。

全般

  • IgxCarousel
    • 廃止されたプロパティを撤去しましたkeyboardSupport。
  • IgxSlide
    • Deprecation–tabIndexは廃止され、今後のバージョンで削除されます。
  • IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
    • カラムのminWidthandmaxWidthはユーザー指定widthの範囲を越えないように制約します。
    • SSR モードでは、高さが 100% または高さのないグリッドは、% サイズでデータなしでサーバー上にレンダリングされます。グリッドには、空のグリッド テンプレートまたは読み込みインジケーター (isLoading が true の場合) が表示されます。
    • SSR モードでは、幅が 100% または幅のないグリッドは、% サイズとすべての列でサーバー上でレンダリングされます。
    • ​pagingModeプロパティは単純文字列'local'and'remote'設定でき、GridPagingModeenumをインポートする必要がありません。
  • IgxHierarchicalGrid
    • 最上位のレコードを、関連付けられた子レコードの属性またはデータに基づいて動的に絞り込むことができる新しい高度なフィルタリング機能が導入されました。
    • 新しいschemainputプロパティを追加し、EntityTypeオブジェクトのコレクションを渡すために使えます。この特性はリモートデータシナリオで必要です。
  • IgxQueryBuilderComponent, IgxAdvancedFilteringDialogComponent
    • 階層構造のエンティティのサポートが追加されました。
  • EntityType
    • 新しいオプションプロパティ「childEntitiesis theres」が導入され、ネストされたエンティティを作成するために使えます。

すべてを包み込むために...

互換性のためにシームレスに作成されたIgnite UI for Angularは、最新のテクノロジとメジャー リリースの力を活用できるライブラリです。最高のAngular UIツールキットと関連する洞察を提供することに尽力し、私たちの目標は、より多くのノウハウ、新機能、パフォーマンスの向上、安定性の向上を提供することです。一部の拡張機能は、Ignite UI for Angular GitHubリポジトリを通じて、あなたのようなユーザーからのリクエストのおかげで追加されました。このことを念頭に置いて、私たちは常に提案やフィードバックを受け入れています - それは私たちを成長させ、あなたの開発ニーズによりよく対応します。

詳細については、以下をご覧ください。

Angular
デモを予約