# ActiveReportsJS Angular 보고서 디자이너

## Content

이 페이지에서는 ActiveReportsJS Angular 보고서 디자이너 컴포넌트에 대해 자세히 살펴봅니다. 보고서 디자이너 컴포넌트를 Angular 응용 프로그램으로 통합하는 간단한 가이드는 [시작하기](/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Angular) 자습서를 확인할 수 있습니다.

### ActiveReportsJS Angular NPM 패키지

[@mescius/activereportsjs-angular](https://www.npmjs.com/package/@mescius/activereportsjs-angular) npm 패키지를 통해 ActiveReportsJS Angular 보고서 디자이너를 포함한 라이브러리를 배포합니다. 기본 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 패키지는 핵심 기능을 제공합니다.

### ActiveReportsJS Angular 모듈

ActiveReportsJS Angular 보고서 디자이너는 `ActiveReportsModule` Angular 모듈에 있으므로, 응용 프로그램의 루트 모듈 또는 보고서 디자이너와 함께 사용하도록 되어 있는 다른 모듈로 가져와야 합니다. 예를 들어 다음과 같습니다.

```javascript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@mescius/activereportsjs-angular";

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

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

ActiveReportsJS Angular 보고서 디자이너 컴포넌트를 `gc-activereports-designer` 태그와 통합할 수 있습니다. 다음 입력 속성을 사용할 수 있습니다.

| 속성 | 유형 | 설명 |
| --- | --- | --- |
| onInit | ()=>[DesignerConfig](/activereportsjs/api/modules/ReportDesigner) | 디자이너의 초기화 옵션이 포함된 [DesignerConfig](/activereportsjs/api/modules/ReportDesigner) 객체를 반환합니다. |
| hotkeysEnabled | boolean | **더 이상 사용되지 않음**: 대신 `onInit` 콜백을 사용하세요. |
| language | string | **더 이상 사용되지 않음**: 대신 `onInit` 콜백을 사용하세요. |
| customInitTemplates |  | **더 이상 사용되지 않음**: 대신 `onInit` 콜백을 사용하세요. |
| fontSet | "default" \| "registered" \| "all" | **더 이상 사용되지 않음**: 대신 `onInit` 콜백을 사용하세요. |
| dataSources | [데이터 소스 템플릿](@api/modules/reportdesigner.html#datasourcetemplate)의 배열 | [미리 정의된 데이터 소스 및 데이터 집합](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Add-Predefined-Datasources-Datasets)을 설정합니다. |
| reportList | [보고서 리소스 정보 항목](@api/modules/reportdesigner.html#reportresourceinfo)의 배열 | [하위 보고서의 미리 정의된 보고서 이름](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources)을 설정합니다. |
| imageList | [이미지 리소스 정보 항목](@api/modules/reportdesigner.html#imageresourceinfo)의 배열 | [이미지 보고서 항목의 미리 정의된 이미지](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources)를 설정합니다. |
| onCreate | [onCreate 함수](@api/interfaces/reportdesigner.actionhandlers.html#oncreate) | 디자이너 도구 모음에 [새 보고서 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-new-report-button)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onOpen | [onOpen 함수](@api/interfaces/reportdesigner.actionhandlers.html#onopen) | 디자이너 도구 모음에 [보고서 열기 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-open-report-button)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onRender | [onRender 함수](@api/interfaces/reportdesigner.actionhandlers.html#onrender) | 디자이너 도구 모음에 [보고서 미리 보기 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onSave | [onSave 함수](@api/interfaces/reportdesigner.actionhandlers.html#onsave) | 디자이너 도구 모음에 [보고서 저장 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onSaveAs | [onSaveAs 함수](@api/interfaces/reportdesigner.actionhandlers.html#onsaveas) | 디자이너 도구 모음에 [다른 이름으로 저장 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onOpenFileMenu | [onOpenFileMenu 함수](@api/interfaces/reportdesigner.actionhandlers.html#onopenfilemenu) | 디자이너 도구 모음에 "파일" 메뉴를 추가하고 해당 클릭 처리기를 설정합니다. |
| report | [보고서 개체](@api/modules/reportdesigner.html#report) | 디자이너에서 지정된 보고서를 로드합니다. |
| documentChanged | (args: DocumentChangedEventArgs)=>void | 디자이너에 로드된 보고서가 변경될 때 발생하는 이벤트에 대한 핸들러를 설정합니다. |

또한 부모 컴포넌트에서 [디자이너 클래스 인스턴스](@api/classes/reportdesigner.designer.html)의 `getReport`, `setReport` 및 `processCommand` 메서드를 `ViewChild` 삽입과 함께 사용할 수 있습니다.

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