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:

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

次に、新機能について

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

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

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

​IN and NOT INoperatorsを用いたネストされたクエリの作成を可能にします

​INorNOT IN比較演算子を選択することで、SQLのサブクエリを作成できます。これらは、あるクエリを別のクエリに埋め込むことで、より複雑なクエリを実行できる強力なツールです。これは現在、Query Builder 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
    • Behavioral Changes– themaximumIndicatorsCount inputプロパティはデフォルトで10。
    • 廃止–​CarouselIndicatorsOrientationenumメンバーtopおよびbottomは非推奨化され、将来のバージョンで削除される予定です。代わりに使startandend。

新機能

  • IgxBanner
    • 新しいexpandedinputプロパティを導入し、バナーの状態を動的に制御できるようになりました。バナーは、初期および実行時にプログラムで「拡大」(見える)または「折りたたみ」(隠れ)にプログラム的に設定できるようになりました。アニメーションはランタイム更新時にトリガーされます — 開いたアニメーションはexpandedに設定されたときにtrue、閉じるアニメーションはfalseに設定されたときに再生されます。ただし、プロパティが最初に設定されたときにアニメーションは起動しません。
    • バナーのイベントライフサイクル(opening、opened、closing、closed)は、ユーザーの操作(例:開閉のクリック)によってのみトリガーされます。expandedプロパティを使ったプログラム的更新はイベントを発生させません。
    • 進行中のアニメーション中にプロパティexpandedが変化すると、現在のアニメーションは停止し、逆のアニメーションが前のアニメーションの終了点から始まります。例えば、開くアニメーション(10秒)が6秒で中断されexpanded​falseに設定されている場合、閉じるアニメーション(5秒)は3秒目から始まります。
  • IgxQueryBuilder新しいデザインで、外観と機能が更新されています
    • IgxQueryBuilderComponent
      • IN/NOT IN 演算子を指定してネストされたクエリを作成する機能が導入されました。
      • ドラッグや使用でコンディションチップの位置を変更する機能を導入しましたArrow Up/Down。
      • エンティティ名とフィールドの配列を記述するentitiesオブジェクトの配列を受け入れるEntityTypeプロパティを追加しました。fieldsinputプロパティは非推奨となり、今後のバージョンで削除される予定です。自動移行は利用可能で、適用されますng update。
      • AddeddisableEntityChangeプロパティは、初回選択後にルートレベルで選択したエンティティを無効化できます。デフォルトはfalse。
      • AddeddisableReturnFieldsChangeプロパティは、ルートレベルでフィールドコンボを無効化するために使えます。デフォルトはfalse。
      • また、canCommit,commit anddiscard publicメソッドを追加し、ユーザーが表現木の現在の状態を保存または破棄できるようにしました。
      • 検索値入力をテンプレート化するオプションを追加しました:<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
      • Expressionはワンクリックで編集モードに入ります。EnterまたはSpace。
      • ​IgxQueryBuilderComponent内の条件選択はもはやサポートされていません。表現のグループ化/アングルーピングは、新たに公開されたドラッグ&ドロップ機能によって実現されました。
      • コンテキストメニューからの複数の式の削除はサポートされなくなりました。
    • IgxQueryBuilderHeaderComponent
      • Behavioral Change
      • Legend is no longer shown.
      • もしtitleinputプロパティが設定されていなければ、デフォルトでは空文字列になります。
      • Deprecation
      • theshowLegend andresourceStrings inputプロパティは非推奨化されており、今後のバージョンで削除される予定です。自動移行は利用可能で、適用されますng update。
  • IFilteringExpression
    • 新しいオプションプロパティが導入されましたconditionNameこれは一般的に既存のものと同じcondition.name。
  • IFilteringOperation
    • 新しいオプションプロパティが導入されましたisNestedQueryこれは、条件がネストされたクエリ作成につながるかどうかを示すために使われます。

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

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

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

Angular
デモを予約