[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Webデザイナコンポーネントの使用（Angular）

Angularアプリケーションを作成する

新しいAngularアプリケーションを作成する簡単な方法はnpmパッケージのAngular CLIを使用することです。事前にインストールされている必要があります。
次のコマンドを入力して、新しいAngularアプリケーションを作成します。

ng new arjs-designer-app

npmパッケージをインストールする

AngularアプリケーションでWebデザイナコンポーネントを使用するには@grapecity/activereportsパッケージに含まれるWebデザイナコンポーネントを使用します。このパッケージをインストールするには、アプリケーションのルートフォルダから次のコマンドを入力します。

npm install @grapecity/activereports

また、Webデザイナコンポーネントを日本語で表示するため、ローカライズモジュールをインストールします。次のコマンドを入力します。

npm install @grapecity/activereports-localization

Webデザイナコンポーネントを追加する

アプリケーションのルートフォルダから次のコマンドを実行して、Webデザイナコンポーネントをホスト、および表示する新しいコンポーネントを生成します。

ng generate component DesignerHost

Webデザイナコンポーネントをホストするdiv要素をsrc\app\designer-host\designer-host.component.htmlファイルに追加します。

<div id="designer-host"></div>

div要素のスタイルをsrc\app\designer-host\designer-host.component.cssファイルに追加します。

#designer-host {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}

Webデザイナコンポーネントを初期化するコードをsrc\app\designer-host\designer-host.component.tsに追加します。また、ローカライズモジュールを追加します。

import { Component, AfterViewInit } from "@angular/core";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import '@grapecity/activereports-localization-ja';

@Component({
  selector: "app-designer-host",
  templateUrl: "./designer-host.component.html",
  styleUrls: ["./designer-host.component.css"],
})
export class DesignerHostComponent implements AfterViewInit {
  constructor() {}

  ngAfterViewInit() {
    new ReportDesigner("#designer-host", { language: "ja" });
  }
}

Webデザイナコンポーネントをアプリケーションに追加する

src\app\app.component.htmlファイルを開き、以下の内容を設定します。

<app-designer-host></app-designer-host>

src\styles.cssに必要なスタイルをインポートします。

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-designer.css";

アプリケーションを実行する

次のコマンドを入力してAngularアプリケーションを実行します。ページ上にWebデザイナコンポーネントが表示されます。レポートに、コントロールの追加、プロパティの設定、データソースを作成するなど、基本的な機能を確認できます。

ng serve

関連トピック