# Angular에서 Wijmo 사용하기
## Content
**Wijmo**는 고성능 UI 컴포넌트를 제공하며, 인기 있는 JavaScript 프레임워크인 **Angular** 또한 지원합니다. (Angular 13 버전 이상)
Wijmo Angular 컴포넌트는 **TypeScript 클래스 상속**을 활용하여, 해당 컨트롤 클래스를 확장합니다. 즉, Wijmo 컴포넌트를 참조하면, 인스턴스는 **Wijmo 컨트롤**(모든 속성, 이벤트, 메서드를 포함)과 **Angular 컴포넌트** 역할을 동시에 수행하게 됩니다. 또한, Angular의 데이터 바인딩 시스템과 매끄럽게 통합되어, 단방향 및 양방향 바인딩과 이벤트 처리를 모두 지원합니다.
Wijmo 컨트롤, Angular 컴포넌트, Angular 자체가 모두 TypeScript로 작성되었기 때문에, 일관되고 효율적인 개발 환경을 제공합니다.
이번 섹션에서는 Wijmo Angular 2 컴포넌트, Angular 마크업 문법에 대해 설명하고, Angular 애플리케이션에 Wijmo 컴포넌트를 추가하는 빠른 시작 가이드에 대해 안내합니다.
## Angular 빠른 시작
Angular 프로젝트에서 Wijmo를 설정하는 방법을 안내합니다.
예제로는 **Wijmo FlexGrid**를 독립적인 Angular 컴포넌트로 추가하여, Angular DataGrid를 생성하는 방법을 보여줍니다.
※ 참고: 이번 가이드는 사용자가 Angular CLI를 이용해 Angular 애플리케이션을 생성할 수 있다는 가정하에 작성되었습니다. 자세한 내용은 Angular 공식 웹사이트의 [Angular CLI 문서](https://angular.dev/tools/cli/setup-local)를 참고하시기를 바랍니다.
1\. Wijmo 패키지 설치
2\. Wijmo 모듈 및 데이터 가져오기
3\. Angular DataGrid 마크업 추가
### Wijmo 패키지 설치
1\. Angular 애플리케이션을 열고\, 패키지를 설치할 프로젝트 폴더로 이동합니다\.
2\. 아래 명령어를 사용하여 Wijmo Angular 패키지를 설치합니다\.
```bash
npm install @mescius/wijmo.angular2.all
```
### Wijmo 모듈 및 데이터 가져오기
1\. 필요한 Wijmo 모듈을 애플리케이션에 가져옵니다\.
2. `app.component.ts` 파일에 관련 모듈을 가져와 import 배열에 포함시킵니다. 이번 FlexGrid 예제에서는 아래와 같은 코드를 설정해줍니다.
```typescript
import { Component,ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { WjGridModule, WjFlexGrid } from '@mescius/wijmo.angular2.grid';
```
3\. Angular DataGrid에 바인딩할 데이터를 정의합니다\.
```typescript
@Component({
selector: 'app-root',
standalone: true,
imports: [WjGridModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
selectedItem: any;
flexInitialized(_t5: WjFlexGrid) {
throw new Error('Method not implemented.');
}
data: any[];
@ViewChild('flex') flex!: WjFlexGrid;
constructor() {
this.data = [
{ id: 0, country: "US", sales: 1318.37, expenses: 4212.41 },
{ id: 1, country: "Germany", sales: 5847.95, expenses: 89.79 },
{ id: 2, country: "UK", sales: 502.55, expenses: 2878.50 },
{ id: 3, country: "Japan", sales: 4675.40, expenses: 488.65 },
{ id: 4, country: "Italy", sales: 2117.57, expenses: 925.60 },
{ id: 5, country: "Greece", sales: 322.10, expenses: 4163.96 }
];
}
init = () => {console.log(this.flex);}}
```
4. `styles.css` 파일에 아래 import 문을 추가하여 Angular CLI 애플리케이션에 스타일을 로드해줍니다.
```css
@import '@mescius/wijmo.styles/wijmo.css';
```
### Angular 데이터그리드 마크업 추가
Angular에서는 마크업을 통해 FlexGrid의 모든 옵션을 선언할 수 있습니다.
이번 예제에서는 `app.component.html` 파일에 Angular DataGrid 마크업을 추가하고, FlexGrid와 그에 포함될 열들을 선언합니다.
Angular의 마크업 문법 및 이벤트 초기화 방법에 대한 자세한 내용은 **[Angular Components](https://demo.mescius.co.kr/wijmo/docs/GettingStarted/Angular-Components)** 문서를 참고해주시기 바랍니다.
```html
```
### 기존 프로젝트에서 Zone.js 구성하기
기본적으로 **Zoneless change detection**으로 생성된 기존 **Angular 21 애플리케이션**에 Wijmo를 추가하는 경우, 다음 단계를 따라 **Zone.js**를 복원하십시오.
**1\. zone\.js 설치**
```bash
npm install zone.js
```
***
**2\. angular\.json의 polyfills에 zone\.js 추가**
angular.json 파일을 열고 build 및 test 대상의 polyfills 배열에 zone.js를 추가합니다.
```json
{
"projects": {
"my-wijmo-app": {
"architect": {
"build": {
"options": {
"polyfills": ["zone.js"]
}
},
"test": {
"options": {
"polyfills": ["zone.js", "zone.js/testing"]
}
}
}
}
}
}
```
> **중요** : 이 단계를 수행하지 않으면 zone.js가 런타임 시 브라우저에 로드되지 않으며, 다음 단계에서 설정하는 provideZoneChangeDetection provider도 적용되지 않습니다.
***
**3\. provideExperimentalZonelessChangeDetection을 provideZoneChangeDetection으로 교체**
app.config.ts 파일을 열고 change detection provider를 아래와 같이 교체합니다.
```javascript
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true })
]
};
```
> **참고 :** eventCoalescing: true 옵션은 동일한 이벤트로 인해 발생하는 여러 change detection 사이클을 하나의 사이클로 묶어 처리하여 성능을 향상시킵니다.
앱을 실행하면, Angular 애플리케이션에 Wijmo FlexGrid가 성공적으로 통합된 것을 확인할 수 있습니다. 또한 차트, 입력 컨트롤, 피벗 그리드와 같은 다른 Wijmo 컴포넌트도 쉽게 추가할 수 있습니다.
다양한 Wijmo 컴포넌트를 직접 확인하려면 [Wijmo 데모](https://demo.mescius.co.kr/wijmo/learn-wijmo/)를 참고하시기 바랍니다.