Ignite UI for Angularロゴ

Angular コンポーネントでモダンな Web エクスペリエンスをより速く構築

A complete Angular components library of Angular-native UI controls, Material-based UI components, including the fastest Angular data grid and 60+ high-performance charts! Compatible with Angular 18 and built to be enterprise-grade.

Ignite UI for Angular のグリッド コンポーネントを使用して作成された、個人ごとの売上情報のリストを示すグリッド テーブル。
Ignite UI for Angularのロゴ

高機能データグリッド

Angular データグリッドは、無制限の行と列のデータを扱うことができ、カスタムテンプレートへのアクセスやリアルタイムのデータ更新も可能です。簡単にテーマ設定やブランディングができる直観的な API を備えており、最小限のコードでデータに素早く結びつけることができます。

世界中のお客様にご愛顧頂いております

インテュイットのロゴ
チャールズ・ショーブ社のロゴ
ブルーヨンダーのロゴ
タイラーのロゴ

Ignite UI for Angular では、グリッドのパフォーマンスが高速になり、マルチ-クリック、データ入力を容易にするタブの使用、より使いやすいナビゲーションなどの機能を備えた行選択の改善が含まれていました。

Katy Faulkner 氏、Tier One UK Investment Bank、リード UI 開発者
英国ティアワン投資銀行

英国投資銀行

英国で最も有名な投資銀行が Ignite UI の Angular コンポーネントを使用して、戦略的価格設定アプリケーションを最新の直感的でユーザー フレンドリーな UI にアップグレードした方法を学びましょう。詳細情報

高速の Angular チャート

100万点のデータ、10ミリ秒の更新に耐えるパフォーマンス性能を実現した Angular チャートは、柱状、折れ線、横棒などの業務要件を幅広くカバーするチャートタイプをご提供します。また、ファイナンシャルチャートはシンプルなAPIを提供し、複雑な金融データを素早く可視化できます。

財務チャートを備えたIgnite UI for Angularチャート コンポーネントのダッシュボード

Angular チャートでさまざまな業務要件に対応

縦棒、横棒、折れ線、エリア、円など業務要件に合わせたチャートを選択できます。また、軸ラベルやタイトル、間隔など、細かい点まで設定できるようになっています。さらに、金融向けチャートではあらかじめインジケーターやトレンドライン機能が含まれているため、それらの機能を個別に実装する必要もありません。

Angular チャート サンプル 

Ignite UIロケットを組み立てる宇宙飛行士

Angular UI コンポーネント一覧

全てのサンプルを見る

Angular コンポーネントの例とサンプル

100 以上のAngular UI コンポーネントとAngularコンポーネントのサンプルを使用して、次のプロジェクトを始めましょう。美しいスタイル、データ アクセス、AngularコンポーネントとAngularアプリ構築のベスト プラクティスを備えた 12 を超えるAngularサンプルがあります。

すべてのリファレンス アプリケーションを表示する

Angular - タスク プランナー

タスクプランナーアプリは、効率的にプロジェクトのタスク管理を行えるサンプルアプリケーションです。

詳細はこちら

Angular FinTech Grid アプリ

このパワフルなアプリを使用すると、大量のデータストリームを簡単に表示できます。

詳細はこちら

CRM アプリ

HubSpot からインスピレーションを得た、顧客の詳細を管理するためのマスター詳細スタイルのアプリ。概要ダッシュボードと顧客の詳細を複数のタブで表示する応答性の高いビューが含まれています。

詳細はこちら

リソース

Web アプリ開発作業における時間やコストの削減に、是非リソースをご活用ください。

  • Angular リファレンスカード Angular のプロパティやイベントバインディングなどの基本アーキテクチャーから高度なトピックまで、これから Angular を用いた Web アプリケーション開発をはじめようと考えられている方にお勧めの情報を記載いたしております。リファレンスカードをダウンロード
  • Ignite UI CLIの使用開始 Ignite UI CLIを使用して、次のプロジェクトをより迅速に開始できます。このツールは、さまざまなフレームワークでアプリケーションの初期化、開発、スキャフォールディング、および保守を行うのに役立ち、Ultimate UI for jQueryコンポーネント用の事前定義されたテンプレートを提供します。詳細情報
  • デスクトップから Web へ Ignite UI を使用して Angular などの最新のフレームワークで高性能なWebアプリを構築する方法を学べます。詳細はこちら
  • Ignite UI for Angularコンポーネントのアーキテクチャを示すAngular Essential ホワイトペーパー
  • Ignite UI for Angularのコマンド ライン インターフェイスのコンソール出力を示す開発環境
  • ブライアン・ラグナス氏、デスクトップから Web へのIgnite UIリソースに賛成の意を表明

ヘルプとサンプル

次のAngularプロジェクトを開始するために必要なものがすべて揃っています。

製品価格

Ignite UI for Angularは以下のバンドル製品に含まれています。ご要件に合わせて3つの製品プランからお選びください。(製品比較表はこちら

Good Value

Webアプリケーション開発を効率化する、UIコントロールライブラリを提供します。

$0 (税抜)
1開発者あたりの年間サブスクリプション価格

Great Value

Web・デスクトップ・モバイルアプリケーション開発を効率化する、ソフトウェア開発チームのためのオールインワンUI/UX開発ツールキットです。

$0 (税抜)
1開発者あたりの年間サブスクリプション価格

Ignite Rocket

会話に参加しましょう!

よくあるご質問 (FAQ)

What is Angular Material?

Material は、Web、Android、iOS、または Flutter をターゲットとするアプリ向けに設計された、Google によって作成されたオープンソース デザイン システムです。開発者は、設計システムをバックアップするコンポーネントに基づいて、アプリのユーザー インターフェイスを構築する出発点を得ることができます。Infragistics Ignite UI for Angular は、マテリアル デザイン システム上に構築されています。Angular Material には、以下のガイド、仕様、例が含まれています。

  • レイアウト
  • ナビゲーション
  • タイポグラフィ
  • 図像学
  • モーション
  • 交流

優れたデザイン システムと同様に、Angularマテリアルは適応性を備えています。これは、ユーザー インターフェイス設計のベスト プラクティスをサポートするガイドライン、コンポーネント、ツールのシステムです。

What are Angular Components?

AngularディレクティブのサブセットであるAngularコンポーネントは、Angularアプリを構成するユーザー インターフェイス (UI) の基本的な構成要素です。Angularアプリでは、Angularコンポーネントの階層ツリーがユーザー インターフェイスを記述し、ユーザーがブラウザーで表示および操作するアプリケーションのあらゆる側面をカプセル化します。Angularコンポーネントには、テンプレート、スタイル、アニメーション、変更検出、プロバイダー、挿入可能なビューなどが含まれます。

Angularコンポーネントを作成すると、次の 3 つのファイルが存在します。

  1. コンポーネント クラスと呼ばれる TypeScript クラス
  2. コンポーネントのテンプレートと呼ばれる HTML ファイル
  3. コンポーネントのスタイルを設定するためのオプションの CSS ファイル

Angularアプリがブラウザーに読み込まれると、Angularの「ビュー」が表示されます。その「ビュー」は 1 つ以上のAngularコンポーネント (通常は複数) で構成されます。Angularアプリケーションでは、ユーザーがページを移動したり、ビュー内のさまざまなコンポーネントを操作したりすると、Angularフレームワークがコンポーネントの作成、更新、または破棄を処理します。コンポーネント自体はアプリケーションのライフサイクルで発生するイベントに応答できるため、開発者はコンポーネントのライフサイクルのイベントに応答するコードを作成できます。

Angularコンポーネントの詳細については、https://angular.io/api/core/Component をご覧ください。

How to Use Angular Components?

Angular CLI コマンドを使用して、次のコマンドを使用してコンポーネントを生成できます。

ng generate component Product

このコマンドは、以下に示すように ProductComponent を生成します。

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'] }) export class ProductComponent implements OnInit { constructor() { } ngOnInit() { }

コンポーネントは、@Component デコレーターで装飾されたクラスです。

コンポーネントを作成するには 4 つの手順があります。

  1. クラスを作成してエクスポートします。このクラスにはデータとロジックが含まれます。
  2. クラスを @component メタデータで装飾します。メタデータはコンポーネントを説明し、さまざまなプロパティの値を設定します。
  3. コンポーネントを作成するために必要なライブラリとモジュールをインポートします。
  4. コンポーネントのテンプレートを作成し、必要に応じてコンポーネントのスタイルを作成します。

ご覧のとおり、生成された ProductComponent は次のもので構成されます。

  • データとロジックを保持するクラス。
  • アプリ内でデータを表示するための HTML テンプレートとスタイル。これはビューとも呼ばれ、ユーザーが画面上に表示して対話します。
  • コンポーネントの動作を定義するメタデータ。

コンポーネントのメタデータは、@Component デコレーターを使用してクラスに適用されます。コンポーネントのさまざまな動作は、 @Component デコレーターの入力パラメーターであるオブジェクトのプロパティとして渡すことができます。

What is CLI in Angular?

Angularのコマンド ライン インターフェイスは、コマンド ウィンドウ (Mac のターミナル、Windows のコマンド プロンプト/PowerShell、または Visual Studio Code のターミナル ウィンドウ) から起動されるツールです。

Angular CLI をインストールするには、https://nodejs.org/en/download/ から NodeJS がインストールされていることを確認してください。インストールしたら、コマンド ウィンドウを開いて次のように入力します。

npm install -g @angular/cli

Angular CLI (コマンド ライン インターフェイス)を使用すると、アプリケーションのすべてまたは一部を生成するさまざまなコマンドからAngular Schematics を使用したテンプレートを使用できます。 Google チームのAngular CLI は、Angularアプリケーションの構造と依存関係を生成する最速の方法です。スケマティックは、コード生成プロセスからコードを追加または変更するための命令とロジックを含む、テンプレート ベースのコード ジェネレーターです。

Infragistics のIgnite UI CLI は、Angular CLI よりも一歩進んでいます。Ignite UI CLI は引き続きAngular Schematics を使用したテンプレートに基づいていますが、チャート、データ グリッド、さらにはアプリケーション シナリオ全体などのユーザー インターフェイス コンポーネントを新規または既存のAngularアプリケーションに追加できます。チームやビジネスのニーズに基づいて独自のカスタム テンプレートを作成し、アプリ開発を加速し、数秒でコードを生成することもできます。

Angular CLI とIgnite UI CLI を使用して段階的な手順を開始するには、ここをクリックしてください: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

What are directives in Angular?

Angular ディレクティブは DOM 要素を作成し、Angular アプリケーションでのその構造や動作を変更します。Angular には 3 種類のディレクティブがあります。

  1. コンポーネント:テンプレートを含むディレクティブ。
  2. 属性ディレクティブ:要素、コンポーネント、またはその他のディレクティブの外観と動作を変更します。
  3. 構造ディレクティブ:要素を追加または削除して DOM レイアウトを変更します。

AngularコンポーネントとAngularディレクティブの基本的な違いは、コンポーネントにはテンプレートがあるのに対し、属性または構造ディレクティブにはテンプレートがないことです。Angularは、多くの組み込みの構造ディレクティブと属性ディレクティブを提供します。

  • 組み込みの構造ディレクティブは *ngFor と *ngIf です。
  • 属性ディレクティブは NgStyle と NgModel です。

Angular Components vs Directives

Angularアプリケーションのアーキテクチャには、Angularアプリをブラウザに配信するために連携する多くの部分があります。ここでは、関係するアーキテクチャとAngularアプリケーションの構成要素の概要を簡単に説明します。

  • NgModules:アプリケーション ドメイン、ワークフロー、または関連する機能セット専用のコンポーネント セットのコンパイル コンテキストを宣言します。
  • コンポーネント:アプリケーション データとロジックを含むクラスを定義し、ビューを定義する HTML テンプレートと連携します。
  • テンプレート: HTML を、表示前に HTML 要素を変更できるAngularマークアップと組み合わせます。
  • ディレクティブ: DOM 内の要素にカスタム動作を付加します。
  • 双方向データ バインディング:テンプレートの部分とコンポーネントの部分を調整します。
  • サービス:通常、限定的かつ明確に定義された目的でモジュール性と再利用性を高めるために使用されるクラス。
  • 依存関係の注入:コンポーネントに必要なサービスを提供し、サービス クラスへのアクセスを許可します。
  • ルーティング:さまざまなアプリケーション状態間のナビゲーション パスを定義すると、アプリケーション階層を表示できるようになります。

What is Ignite UI for Angular?

Ignite UI for Angular is a complete set of Material-based UI widgets, Angular components & Sketch UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWA’s) targeting Google's Angular framework.

Why should I choose Ignite UI for Angular controls and components?

Ignite UI for Angular 100 以上のデータ チャート、グリッド、コンポーネントを含む、データ豊富で応答性の高い Web アプリをAngularで構築するためのユーザー インターフェイス (UI) コンポーネントの完全なライブラリです。

How often Infragistics release update to their Angular UI Components?

Infragistics は、Angular UI コンポーネント ライブラリの継続的なテストと改善を実施し、マイナー アップデートを毎月リリースし、年に 2 回の大きなリリースで新しいAngularコンポーネント、製品機能、機能強化を導入します。世界中の何千もの企業で使用されている機能豊富なAngularコンポーネント ライブラリにより、開発者はエンタープライズ レベルの品質のAngularアプリをこれまでより迅速に構築できます。

How much does the Ignite UI for Angular product cost?

Angular コンポーネントは、Ignite UI バンドルの一部として含まれています。価格の詳細については、価格ページを参照してください。

How do I deploy an Angular app with the Ignite UI for Angular Components?

最も早く簡単に始める方法は、Ignite UI for Angularドキュメント ページにアクセスし、包括的な入門資料に従うことです。ヘルプ ドキュメントでは、開発者がAngular Schematics とIgnite UI CLI を使用していくつかの手順でAngularアプリケーションを迅速にブートストラップできるように、段階的な説明が提供されています。デモ、コード スニペット、その他の便利なアプリ開発リソースが追加されました。

Can I deploy an application that uses Ignite UI for Angular components to multiple customers?

はい、Ignite UI for AngularコンポーネントまたはAngularコントロールを使用するアプリケーションを無制限のクライアントにデプロイできます。柔軟なプランにより、開発者ごとにのみライセンスを付与し、ランタイム料金、ロイヤルティ料金、導入料金は一切請求しません。

Where can I find Ignite UI for Angular samples?

Infragistics のチームは、Angularコード サンプルの包括的なライブラリを管理しています。ここからアクセスして、Angular Grid のようなシンプルな新しいAngularプロジェクトがどのように見えるかを確認できます。また、チーム コラボレーション アプリ、電子商取引、旅行などを含むサンプル アプリケーションのライブラリもあります。ここでAngularサンプル アプリを探索できます。