Ignite UI for Angular 16.0.0: エキサイティングな改善点を見る

私たちは皆、新しいAngular v16のリリースに興奮しています!私たちは、スタンドアロンの API を手に入れ、改善された反応性、サーバー側のレンダリング、ツールを活用したいと考えています。Infragisticsでは、可能な限り最高のユーザーエクスペリエンスを提供し、フレームワーク、プラットフォーム、テクノロジーの最新バージョンについて常に最新の情報を提供するよう努めています。そのため、Ignite UI for Angular v16 を完全にサポートする 16.0.0リリースに含まれるものを共有することに興奮Angularしています。

Ignite UI for Angular 16.0.0 の新機能

スタンドアロン コンポーネントとIgnite UI for Angularの併用– プレビュー リリース

最大の違いの 1 つはAngular v16 ではスタンドアロン コンポーネントの概念が導入されていることです。これにより、NgModulesを使用する必要性を減らすことで、アプリケーションの構築方法が簡素化されます。

拡張パネルのホバー時の完全な字幕/タイトルのツールチップ

16.0.0 の完全なIgnite UI for Angular変更ログ

全般的

• すべてのIgnite UI for Angularコンポーネントは現在、standaloneコンポーネントとしてエクスポートされます。ライブラリは依然としてエクスポートを行っておりNgModules後方互換性のために保存されていますが、Ignite UI for Angularコンポーネントのいかなる宣言も停止しています。代わりに、コンポーネントのインポートとエクスポートstandaloneだけです。standaloneコンポーネントはまだプレビュー段階であることを念頭に置いてください。一部のユーティリティ指令のエクスポートは将来的に変更される可能性があり、初期リリースのドキュメントに含まれていない可能性があるため、機能の状態preview理由となります。

  
  

  これで、次のことができます。

// IGX_GRID_DIRECTIVES exports all grid related components and directives
import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    standalone: true,
    imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
})

または

// Single import of only the <igx-grid> component.
import { IgxGridComponent } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    standalone: true,
    imports: [IgxGridComponent, AsyncPipe]
})

or still

// `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
import { IgxGridModule } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    standalone: true,
    imports: [IgxGridModule, AsyncPipe]
})

• IgxChip
  • 行動の変化:​igxChipスタイルは再検討され、チップの選択/解除時のコンテナ選択アニメーションは削除されました。
  • 行動の変化:削除ボタンの動作が再検討されました。チップがdisabled状態にあるときは、削除ボタンが隠されています。
• IgxGrid, IgxHierarchicalGrid
  • 破壊的変更: IgxHeaderExpandIndicatorDirective ディレクティブと IgxHeaderCollapseIndicatorDirective ディレクティブ、および headerExpandIndicatorTemplate プロパティと headerCollapseIndicatorTemplate プロパティの名前がそれぞれ IgxHeaderExpandedIndicatorDirective、IgxHeaderCollapsedIndicatorDirective、headerExpandedIndicatorTemplate、headerCollapsedIndicatorTemplate に変更されました。自動移行が利用可能で、ng update 時に適用されます。
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

重大な変更: バージョン 12.1.0 以降で非推奨となった次のグリッド プロパティが削除されました。

• evenRowCSS;
• oddRowCSS;
• ページ;
• ページング;
• パーページ;
• totalPagesです。
• isFirstPageです。
• isLastPage;

また、次の非推奨のグリッドイベントも削除されます。

• pageChange;
• perPageChange;
• pagingDone;

グリッド API から削除された非推奨のメソッドは次のとおりです。

• nextPage;
• previousPage;
• paginate;
• getCellByColumnVisibleIndex;

新機能

• IgxChip
  • 新しい入力variantは以下の値のいずれかを取ることができます:'primary','info','success','warning'。'danger'
• IgxExpansionPanel:
  • IgxExpansionPanelTitleDirective​IgxExpansionPanelDescriptionDirective提供されたテキストコンテンツのツールチップ表示。
• IgxDateRangePicker
  • AddedshowWeekNumbers inputで、週の番号が隣に表示されるかどうかを切り替えます
• IgxGrid, IgxHierarchicalGrid:
  • totalItemCountリモート仮想化シナリオではInputバインドも可能です。
  • rowExpandedIndicatorTemplate​rowCollapsedIndicatorTemplate,headerExpandedIndicatorTemplate,headerCollapsedIndicatorTemplateはInputとしてバインドでき、それぞれ行の展開/折りたたみインジケーターのテンプレートを提供します。これは、既存の同等のテンプレート指令に加えて再利用を可能にするものです。
• IgxPivotGrid
  • AddedpivotConfigurationChanged eventは、UIを通じていずれかのpivotConfigurationプロパティが変更されるたびにトリガーされます。
• ISortingExpression現在、データ項目のキーに対してプロパティfieldNameの型を狭めるためのオプションの汎用型パラメータを受け入れています。例:ISortingExpression<MyDataItem>
• Util
  • 新たに追加CachedDataCloneStrategy循環参照付きオブジェクトのクローンが可能になりました。

ラップ

私たちは、新機能の出荷、パフォーマンスの向上、安定性の向上を継続的に提供しています。最高のAngular UIツールキットと関連する洞察を提供することを約束し、私たちの目標は、より多くのノウハウであなたを支援することです。非常に重要な最新のピボットグリッドとは別に、Angularデータグリッドなどの他のコンポーネントも非常に重要であることを私たちは知っています。そのため、フル機能のAngular UI グリッドをゼロから作成する方法を学ぶのに役立つAngular UI データ グリッドのチュートリアルを公開しました。さあ、見てください。

また、SketchまたはAdobe XDのデザインファイルを実際のUIコンポーネントにマッピングし、本番環境に対応したコードを作成することで、デザインからコードまでのプロセスを加速する、クラウドベースのローコードアプリビルダープラットフォームであるApp Builder​の開発も続けています。これにより、Angular、Blazor、またはWeb Componentsアプリケーションをこれまで以上に迅速に生成できます。一部の機能強化は、GitHubリポジトリを通じてあなたのようなユーザーからリクエストを受けたおかげです。このことを念頭に置いて、私たちは常に提案やフィードバックを受け入れています - それは私たちを成長させ、あなたの開発ニーズによりよく応えることを可能にします。最後に、私たちは、次の目標の透明性と可視性も基本であることを理解しています。そのため、ロードマップは常に最新の状態に保っています。

さらに

フォローする中程度私たちが取り組んでいる最新のAngular関連プロジェクトについて最新情報を入手してください。星をつけてくださいGitHubのまた、懸念事項、質問、または機能要求に対処することにより、製品を継続的に改善するのに役立ちます。問題私たちは、すべてのニーズを満たし、アプリを簡単に構築するために、製品エクスペリエンスを常に改善するために最善を尽くし続けます。