デザイナの組み込み（Angular）

このトピックではAngularフレームワークでデザイナを使用する際のAngular対応パッケージについて説明します。Angular対応パッケージからデザイナをWebアプリケーションに組み込む方法については、クイックスタート > Webデザイナコンポーネントの使用 > Angularを参照してください。

npmからインストール

Angular対応パッケージはnpmを利用してインストールすることができます。
@grapecity/activereports-angularパッケージをプロジェクトにインストールすると、デザイナを使用できます。
Angular対応パッケージは@grapecity/activereportsパッケージに依存しており、Angular対応パッケージをインストールすると同時にインストールされます。

ActiveReportsModuleのインポート

Angular対応パッケージのデザイナはActiveReportsModuleに存在するため、次のようにアプリケーションのルートモジュール、またはデザイナを使用する他のモジュールにインポートする必要があります。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@grapecity/activereports-angular";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angularのデザイナ

Angularのデザイナは、gc-activereports-designerタグを使用して組み込むことができます。また、次のプロパティを使用して外観を設定できます。

プロパティ	設定値	説明
hotkeysEnabled	boolean	ファイルを開くおよび保存するショートカットを有効にするかどうかを示します。
language	string	デザイナコンポーネントの表示言語を設定します。詳細については、「表示言語を設定する」を参照してください。
fontSet	"default" \| "registered" \| "all"	利用可能なフォントを示します。
dataSources	DataSourceTemplatesの配列	事前定義されたデータソースとデータセットを設定します。
reportList	Report Resource Info itemsの配列	SubReportコントロールの［レポート名前］プロパティを設定します。
imageList	Image Resource Info itemsの配列	Imageコントロールの事前定義画像を設定します。
onCreate	onCreate関数	デザイナのツールバーに［新規作成］ボタンを追加し、対応するクリックハンドラを設定します。
onOpen	onOpen関数	ツールバーに［開く］ボタンを追加し、対応するクリックハンドラを設定します。
onRender	onRender関数	ツールバーに［プレビュー］ボタンを追加し、対応するクリックハンドラを設定します。
onSave	onSave関数	ツールバーに［保存］ボタンを追加し、対応するクリックハンドラを設定します。
onSaveAs	onSaveAs関数	ツールバーに［名前を付けて保存］ボタンを追加し、対応するクリックハンドラを設定します。
onOpenFileMenu	onOpenFileMenu関数	ツールバーに［ファイル］メニューを追加し、対応するクリックハンドラを設定します。
report	レポートオブジェクト	指定されたレポートをデザイナに読み込みます。

親コンポーネントは、ViewChildインジェクションによってDesigner クラスのgetReport、setReport、およびprocessCommandメソッドを使用できます。

@ViewChild(DesignerComponent, { static: false }) reportDesigner: DesignerComponent;