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アプリを構築する方法を学べます。詳細はこちら
  • Angular Ignite UI for Angularコンポーネントのアーキテクチャを示す Essential ホワイトペーパー
  • Ignite UI for Angularのコマンドラインインターフェースのコンソール出力を表示する開発環境
  • Brian Lagunas がデスクトップから 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 とAngularマークアップを組み合わせて、HTML 要素を表示する前に変更できるようにします。
  • ディレクティブ: 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 +データチャート、グリッド、コンポーネントなど、Angularでデータが豊富でレスポンシブなWebアプリを構築するためのユーザーインターフェイス(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プロジェクトがどのように見えるかを確認できます。また、チーム コラボレーション アプリ、e コマース、旅行など、サンプル アプリケーションのライブラリもあります。Angularサンプルアプリは、こちらでご覧いただけます。