# Angular용 ActiveReportsJS 보고서 뷰어 래퍼

## Content

이 페이지에서는 Angular용 ActiveReportsJS 보고서 뷰어 래퍼에 대해 자세히 설명합니다. Angular 응용 프로그램에 래퍼 통합을 위한 간단한 가이드는 [시작하기](/activereportsjs/docs/GettingStarted/QuickStart/QuickStart-Angular) 자습서를 확인하십시오.

### ActiveReportsJS Angular NPM 패키지

[@mescius/activereportsjs-angular](https://www.npmjs.com/package/@mescius/activereportsjs-angular) npm 패키지를 통해 Angular용 ActiveReportsJS 보고서 뷰어 래퍼 컴포넌트가 포함된 라이브러리를 배포합니다. 기본 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 패키지는 핵심 기능을 제공합니다.

### ActiveReportsJS Angular 모듈

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

```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 뷰어 컴포넌트

ActiveReportsJS Angular 뷰어 컴포넌트는 `gc-activereports-viewer` 태그를 사용하여 HTML에서 참조할 수 있습니다. 뷰어 컴포넌트의 다음 입력 속성을 사용하여 모양을 설정할 수 있습니다.

| 속성 | 유형 | 기본값 | 설명 |
| --- | --- | --- | --- |
| language | string |  | 뷰어 컴포넌트 인터페이스의 언어를 설정합니다. 자세한 내용은 [지역화](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Localization) 페이지를 참조하십시오. |
| panelsLocation | 'sidebar' | 'toolbar' | 'sidebar' |
| exportsSettings | Object |  | 내보내기 설정을 지정합니다. 자세한 내용은 [내보내기 설정](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) 페이지를 참조하십시오. |
| availableExports | 문자열의 배열 | [] | 사용할 수 있는 내보내기 필터 목록을 설정합니다. 자세한 내용은 하단의 ActiveReportJS 내보내기 서비스 섹션을 참조하십시오. |
| mouseMode | 'Pan' | 'Selection' | Pan |
| renderMode | 'Galley' | 'Paginated' | Paginated |
| viewMode | 'Continuous' | 'SinglePage' | Continuous |
| zoom | 'FitWidth' | 'FitPage' | number |
| fullscreen | boolean | false | 이 속성이 `true`로 설정되어 있으면 뷰어 컴포넌트가 전체 화면 모드로 표시됩니다. |
| toolbarVisible | boolean | true | 뷰어 컴포넌트의 도구 모음 표시 여부를 설정합니다. |
| sidebarVisible | boolean | true | 뷰어 컴포넌트의 세로 막대 표시 여부를 설정합니다. |
| errorHandler | function | null | 뷰어 컴포넌트에서 오류가 발생한 경우 호출되는 콜백입니다. |
| showParametersOnOpen | 'auto'\|'always' | 'auto' | `auto` 값은 보고서의 매개변수에 기본값이 있는 경우에도 보고서 로드 시 `매개변수 패널`이 자동으로 열려야 함을 나타냅니다. |
| animations | AnimationSettings |  | 애니메이션 구성을 지정합니다. |
| themeConfig | UIThemeConfig |  | 테마 구성을 지정합니다. |
| theme | ColorTheme or built-in theme ID |  | 활성화된 테마를 지정합니다. |

이러한 입력 속성을 동적 값에 바인딩하여 뷰어 컴포넌트의 기본 UI를 완전히 덮어쓸 수 있습니다. 자세한 내용은 [사용자 정의 페이지](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Customization)를 참조하십시오.

또한 뷰어 컴포넌트는 다음 출력 속성을 제공합니다.

| 이벤트 | 매개 변수 | 설명 |
| --- | ----- | --- |
| init |  | 뷰어 컴포넌트가 로드되면 발생합니다. |
| reportLoaded | [ReportLoadEventArgs](@api/modules/reportviewer.html#reportloadeventargs) | 렌더링 시작 전 보고서가 뷰어 컴포넌트에서 로드되는 경우 발생합니다. |
| documentLoaded | [DocumentLoadEventArgs](@api/modules/reportviewer.html#documentloadeventargs) | 보고서 렌더링이 완료되면 발생합니다. |

마지막으로, 부모 컴포넌트는 `ViewChild` 삽입을 사용하여 [뷰어 클래스 인스턴스의 메서드 및 속성](@api/classes/reportviewer.viewer.html)에 액세스할 수 있습니다.

```javascript
@ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
```

### ActiveReportJS 내보내기 서비스

ActiveReportJS Angular 모듈에는 PDF, 표 형식 데이터 또는 HTML 형식으로 보고서를 내보낼 수 있는 서비스가 포함되어 있습니다. 이러한 내보내기 서비스는 뷰어의 호스트 컴포넌트, 해당 모듈 또는 응용 프로그램의 루트 모듈에서 삽입해야 합니다. 다음은 루트 모듈에서 내보내기 서비스를 삽입하는 코드의 예입니다.

```javascript
import {  AR_EXPORTS,  PdfExportService,  HtmlExportService,  TabularDataExportService} from "@mescius/activereportsjs-angular";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [    {
    provide: AR_EXPORTS,
    useClass: PdfExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: HtmlExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: TabularDataExportService,
    multi: true
  }
],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

또한 뷰어 컴포넌트의 `availableExports` 입력 속성을 사용하여 사용 가능한 내보내기 목록을 제한할 수 있습니다. 일부 보고서의 경우 사용자 인터페이스에만 PDF 내보내기를 두는 것이 좋습니다.

### 관련 링크

* [라이브 데모](/activereportsjs/demos/features/viewer-integration/angular)
* [사용자 정의](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Customization)
* [지역화](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Localization)
* [인쇄](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Print)
* [내보내기](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export)
* [테마](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Themes)