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– これは、すべてのタイル コンポーネントを含むメイン コンポーネントであり、タイル レイアウト全体のコンテナとして機能します。

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

列と行

ユーザーは、タイル マネージャーのグリッド列の数を定義できます。これを行うには、column-count property を必要な列数に設定するだけです。

Gap

Gap プロパティは、タイル間のスペースを定義します。the gapプロパティの値は、数値の後に長さの単位 (px、rem、em など) を付ける必要があります。この値は、タイル間の水平方向のギャップ (幅) と垂直方向のギャップ (高さ) の両方に適用されます。

最小幅と最小高さ

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

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

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

  • ​col-spanプロパティは、レイアウト内でタイルがまたがる列の数を指定し、タイルの水平サイズを制御できるようにします。
  • ​row-spanプロパティは、タイルが垂直方向に何行にまたがるかを決定し、レイアウト内のタイルの高さを調整します。
  • ​col-startプロパティは、タイルが配置される開始列を指定します。
  • ​row-startプロパティは、タイルが配置される開始行を指定します。
  • ​disable-fullscreenプロパティは、デフォルトの全画面表示アクションボタンを非表示にします。
  • ​disable-maximizeプロパティは、デフォルトの最大化トグル アクション ボタンを非表示にします。
  • ​disable-resizeプロパティは、ユーザーがタイルのサイズを変更できないようにします。
Tile

Ignite UI for Angular 19.2.0 Changelog

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

全般

  • IgxCarousel
    • 非推奨の property keyboardSupportを削除しました。
  • IgxSlide
    • 非推奨-tabIndexは非推奨であり、将来のバージョンで削除される予定です。
  • IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
    • 列のminWidth and maxWidthは、ユーザー指定のwidthを制約して、その境界外に出られないようにします。
    • SSR モードでは、高さが 100% または高さのないグリッドは、% サイズでデータなしでサーバー上にレンダリングされます。グリッドには、空のグリッド テンプレートまたは読み込みインジケーター (isLoading が true の場合) が表示されます。
    • SSR モードでは、幅が 100% または幅のないグリッドは、% サイズとすべての列でサーバー上でレンダリングされます。
    • ​pagingModeプロパティは、単純な文字列として設定できるようになりました'local'および'remote' enum GridPagingModeをインポートする必要はありません。
  • IgxHierarchicalGrid
    • 最上位のレコードを、関連付けられた子レコードの属性またはデータに基づいて動的に絞り込むことができる新しい高度なフィルタリング機能が導入されました。
    • コレクションのEntityType objectを渡すために使用できる新しいschema inputプロパティを追加しました。このプロパティは、リモート データ シナリオに必要です。
  • IgxQueryBuilderComponent, IgxAdvancedFilteringDialogComponent
    • 階層構造のエンティティのサポートが追加されました。
  • EntityType
    • ネストされたエンティティを作成するために使用できる新しいオプションプロパティchildEntitiesが導入されました。

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

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

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

Angular
デモを予約