What’s New: Ignite UI for Angular 19.1

What’s New: Ignite UI for Angular 19.1

Ignite UI for Angular 19.1 には、Query Builder や Carousel コンポーネントなどの強力な新機能が付属しています。詳細については、このリリースのブログ記事をご覧ください。

7分で読めます

2024 年 11 月にIgnite UI for Angular 19.0 がリリースされ、Angular 19 との互換性と強化されたグリッド サマリー機能が追加された後、Ignite UI for Angular 19.1 の時期が来ました。優れた新しいデザインと強力な新機能が付属しています。

  • クエリビルダー – 新しいデザイン、複数テーブルクエリのサポート、ネストされたクエリなど。
  • カルーセル – 更新されたデザインと垂直方向のサポート。

各テーマについて詳しく見ていきましょう。

クエリ ビルダー コンポーネントの更新

Angular Query Builderコンポーネントはしばらく前からリリースされており、開発者が指定したデータ セットに対して複雑なデータ フィルタリング クエリを作成できる豊富な UI を提供します。それは素晴らしい新しいデザインといくつかの強力な新機能を受け取りました。

まず、デザインと動作の変更についてです

Quiery Builderの概要 以前と現在

Full list of behavioral changes:

  • エクスプレッションは、1 回のクリックEnterまたはSpaceで編集モードに入ります。
  • クエリビルダーコンポーネント内での条件の選択はサポートされなくなりました。
  • 式のグループ化/グループ化解除は、新しく公開されたドラッグ&ドロップ機能によって実現されるようになり、ユーザーは上向き矢印/下向き矢印キーを使用して条件チップの位置を変更できるようになりました。
  • コンテキストメニューからの複数の式の削除はサポートされなくなりました。
  • 凡例は削除されます。
  • タイトル入力が設定されていない場合、デフォルトでは空の文字列になります。

次に、新機能について

Angular Query Builder で、複数テーブル クエリのサポートがサポートされるようになりました

注文、顧客、および製品に対して個別のテーブルを持つ電子商取引アプリケーションがあるシナリオを想像してみてください。マルチテーブル クエリでは、これらのテーブルのデータを組み合わせて、顧客の詳細や製品情報など、各注文の詳細ビューをすべて 1 つのグリッド コンポーネント内に表示できます。特定のシナリオによっては、ユーザーがその場で拡張できます。これにより、異なるアプリケーションセクション間を移動することなく、全体像を把握できるため、ユーザーエクスペリエンスが向上します。

この点で、Angular Query Builder コンポーネントを使用すると、このような複雑なクエリを視覚的に作成できます。このコンポーネントを使用すると、ユーザーはさまざまなテーブルからフィールドを選択し、リレーションシップを定義し、条件を設定できます。その後、結果のクエリを実行して結合されたデータをフェッチし、グリッドコンポーネントにバインドして表示できますIgnite UI Angular。このアプローチにより、リレーショナル データの操作プロセスが簡略化され、SQL クエリの記述に慣れていないユーザーでもリレーショナル データにアクセスしやすくなります。

ネストされたクエリの作成を許可します using IN and NOT IN operators

​INまたはNOT IN比較演算子を選択すると、SQL サブクエリを作成できます。これらは、あるクエリを別のクエリに埋め込むことで、より複雑なクエリを実行できる強力なツールです。これは、クエリビルダーUIを使用して実現できるようになりました。

angular Query Builder の検索値入力をテンプレート化する新しいオプション

<ng-template igxQueryBuilderSearchValue 
            let-searchValue
            let-selectedField = "selectedField" 
            let-selectedCondition = "selectedCondition"
            let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
    @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){
        <input type="text" required [(ngModel)]="searchValue.value"/>
    } @else {  
        <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></    ng-container>
    }
</ng-template>

シリアル化可能な出力

最後に、出力オブジェクトをJSONにシリアル化できます。これらの機能強化により、Angular Query Builder はこれまで以上に汎用性が高く、ユーザーフレンドリーになります。

現在、Angularカルーセルコンポーネントは、ナビゲーションボタンの垂直方向をサポートしています。

Ignite UI for Angular 19.1.0 Changelog

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

全般

  • IgxCarousel
    • 動作の変更–maximumIndicatorsCount input プロパティのデフォルトが10になりました。
    • 非推奨-CarouselIndicatorsOrientation列挙型メンバー topおよびbottomは非推奨となり、将来のバージョンで削除される予定です。代わりにstart and endを使用してください。

新機能

  • IgxBanner
    • 新しいexpanded input プロパティが導入され、バナーの状態を動的に制御できるようになりました。バナーは、初期時と実行時にプログラムで "展開" (表示) または "折りたたまれ" (非表示) に設定できるようになりました。アニメーションはランタイム更新中にトリガーされます — 開いているアニメーションはexpandedに設定されている場合に再生されますtrue、閉じられたアニメーションはに設定されている場合に再生されますfalse。ただし、プロパティが最初に設定されているときには、アニメーションはトリガーされません。
    • バナーのイベントライフサイクル(opening、opened、closing、closed)は、ユーザーの操作(クリックして開く/閉じるなど)によってのみトリガーされます。expandedプロパティを使用したプログラムによる更新では、イベントは発生しません。
    • アニメーションの進行中にexpandedプロパティが変更された場合、現在のアニメーションは停止し、前のアニメーションが中断したところから反対のアニメーションが開始されます。たとえば、開いているアニメーション (10 秒) が 6 秒で中断され、expandedがfalseに設定されている場合、閉じるアニメーション (5 秒) は 3 秒目から開始されます。
  • IgxQueryBuilderは、更新された外観と新しい機能を備えた新しいデザインを持っています
    • IgxQueryBuilderComponent
      • IN/NOT IN 演算子を指定してネストされたクエリを作成する機能が導入されました。
      • コンディションチップをドラッグまたは使用して再配置する機能を導入しArrow Up/Down。
      • エンティティとその名前とフィールドの配列を記述するEntityTypeオブジェクトの配列を受け入れる the entities property が追加されました。fields input プロパティは非推奨となり、将来のバージョンで削除される予定です。自動移行は利用可能で、ng updateに適用されます。
      • Added disableEntityChange最初の選択後にルートレベルで選択されたエンティティを無効にできるプロパティ。デフォルトはfalseです。
      • Added disableReturnFieldsChangeルートレベルでフィールドコンボを無効にするために使用できるプロパティ。デフォルトはfalseです。
      • ​canCommit、commit、およびパブリックdiscardメソッドが追加され、ユーザーは式ツリーの現在の状態を保存/破棄できます。
      • 検索値の入力をテンプレート化するオプションを追加しました。<ng-template igxQueryBuilderSearchValue let-searchValue let-selectedField = "selectedField" let-selectedCondition = "selectedCondition" let-defaultSearchValueTemplate = "defaultSearchValueTemplate"> @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){ <input type="text" required [(ngModel)]="searchValue.value"/> } @else { <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></ ng-container> } </ng-template>
      • Behavioral Changes
      • エクスプレッションは、1 回のクリックEnterまたはSpaceで編集モードに入ります。
      • the IgxQueryBuilderComponent内の条件の選択はサポートされなくなりました。式のグループ化/グループ化解除は、新しく公開されたドラッグ&ドロップ機能によって実現されるようになりました。
      • コンテキストメニューからの複数の式の削除はサポートされなくなりました。
    • IgxQueryBuilderHeaderComponent
      • Behavioral Change
      • Legend is no longer shown.
      • ​title input プロパティが設定されていない場合、デフォルトでは空の文字列になります。
      • Deprecation
      • ​showLegend​ ​resourceStrings input プロパティは非推奨となり、将来のバージョンで削除される予定です。自動移行が利用可能で、ng updateに適用されます。
  • IFilteringExpression
    • ​conditionNameという新しい省略可能なプロパティが導入されました。これは通常、既存のcondition.nameと等しくなります。
  • IFilteringOperation
    • ​isNestedQueryという新しい省略可能なプロパティが導入されました。これは、条件がネストされたクエリの作成につながるかどうかを示すために使用されます。

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

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

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

Angular
デモを予約