# ActiveReportsJS 보고서 뷰어 Angular 컴포넌트 시작하기

## Content

### **Angular 응용 프로그램 만들기**

새 Angular 응용 프로그램을 가장 쉽게 만들기 위해 권장되는 방법은 [Angular CLI](https://cli.angular.io/)를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 Angular 응용 프로그램을 만듭니다. 자세한 내용은 [Angular](https://angular.io/) 사이트의 [옵션](https://angular.io/cli/new#options)을 참조하십시오.

```bash
ng new arjs-angular-viewer-app --defaults --no-standalone
```

### **ActivereportsJS npm 패키지 설치**

[@mescius/activereportsjs-angular](https://www.npmjs.com/package/@mescius/activereportsjs-angular) npm 패키지를 통해 Angular Report Viewer Component를 배포합니다. 이 패키지는 핵심 기능을 포함하는 기본 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 패키지에 의존합니다. 이러한 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

```bash
npm install @mescius/activereportsjs-angular@latest
```

yarn을 사용하는 경우:

```bash
yarn add @mescius/activereportsjs-angular@latest
```

### **ActiveReportsJS 스타일 가져오기**

`src\styles.css` 파일을 열고 다음 코드를 추가합니다. 이렇게 하면 기본 [보고서 뷰어 컴포넌트 스타일](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Themes)을 가져옵니다.

```css
@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";
```

### **ActivereportsJS Angular 모듈 등록**

> type=warning
> 다음 단계는 Angular v20에 적용됩니다. 이전 버전을 사용하는 경우 단계는 비슷하지만 파일 이름과 구조가 약간 다를 수 있습니다.

`src\app\app.module.ts` 파일을 열고 내용을 다음 코드로 바꿉니다. 이 코드는 표준 모듈 외에 [ActiveReportsModule](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component) 모듈도 등록합니다.

```javascript
import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ActiveReportsModule } from '@mescius/activereportsjs-angular';
import { AppRoutingModule } from './app-routing-module';
import { App } from './app';

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

### **ActiveReportsJS 보고서를 응용 프로그램에 추가**

ActiveReportsJS는 보고서 템플릿 파일에 [JSON 형식](https://www.json.org/json-en.html) 및 `rdlx-json` 확장자를 사용합니다. `public` 폴더에서 `report.rdlx-json`이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### **ActiveReportsJS Angular 보고서 뷰어를 응용 프로그램에 추가**

> type=warning
> 다음 단계는 Angular v20에 적용됩니다. 이전 버전을 사용하는 경우 단계는 비슷하지만 파일 이름과 구조가 약간 다를 수 있습니다.

`src/app/app.ts`를 열고 내용을 다음 코드로 바꿉니다. 컴포넌트의 템플릿은 [Angular 보고서 뷰어 컴포넌트](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component)를 사용합니다. `init` 이벤트의 처리기는 이전 단계에서 만든 `report.rdlx-json`을 엽니다. 또한 컴포넌트는 [ActiveReportsJS Angular 내보내기 서비스](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component)를 삽입하여 사용자가 보고서 뷰어에서 보고서를 지원되는 형식으로 내보낼 수 있게 합니다.

```js
import { Component, ViewChild } from '@angular/core';
import {
  AR_EXPORTS,
  HtmlExportService,
  PdfExportService,
  ViewerComponent,
  TabularDataExportService,
} from '@mescius/activereportsjs-angular';

@Component({
  selector: "app-root",
  template:
    '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></div> ',
  styleUrls: ["./app.component.css"],
  providers: [
    {
      provide: AR_EXPORTS,
      useClass: PdfExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: HtmlExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: TabularDataExportService,
      multi: true,
    },
  ],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer!: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open('report.rdlx-json');
  }
}
```

`src/app/app.css` 파일을 열고 `viewer-host` 요소의 스타일을 추가합니다.

```css
#viewer-host {
  width: 100%;
  height: 100vh;
}
```

### **응용 프로그램 실행 및 테스트**

`npm start` 또는 `yarn start` 또는 `ng serve` 명령을 사용하여 응용 프로그램을 실행합니다. 응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 "Hello, ActiveReportsJS Viewer"라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.

### **관련 링크**

* [라이브 데모](/activereportsjs/demos/features/viewer-integration/angular)
* [Angular 개발자 가이드](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component)