デザイナの組み込み（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タグを使用して組み込むことができます。また、次のプロパティを使用して外観を設定できます。

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

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