Angular에서 Wijmo 사용하기

Wijmo는 독립형 컴포넌트와 템플릿 기반 바인딩을 통해 Angular와 통합됩니다.

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 문서를 참고하시기를 바랍니다.

1. Wijmo 패키지 설치

2. Wijmo 모듈 및 데이터 가져오기

3. Angular DataGrid 마크업 추가

Wijmo 패키지 설치

1. Angular 애플리케이션을 열고, 패키지를 설치할 프로젝트 폴더로 이동합니다.

2. 아래 명령어를 사용하여 Wijmo Angular 패키지를 설치합니다.

npm install @mescius/wijmo.angular2.all

Wijmo 모듈 및 데이터 가져오기

1. 필요한 Wijmo 모듈을 애플리케이션에 가져옵니다.

2. app.component.ts 파일에 관련 모듈을 가져와 import 배열에 포함시킵니다. 이번 FlexGrid 예제에서는 아래와 같은 코드를 설정해줍니다.

import { Component } from '@angular/core';
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.angular2.grid';

3. Angular DataGrid에 바인딩할 데이터를 정의합니다.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjFlexGrid, WjFlexGridColumn],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  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 }
  ];
}

4. styles.css 파일에 아래 import 문을 추가하여 Angular CLI 애플리케이션에 스타일을 로드해줍니다.

 @import '@mescius/wijmo.styles/wijmo.css';

Angular 21 Zoneless 모드

기본 설정으로 생성된 Angular 21 애플리케이션은 Zoneless 변경 감지 방식을 사용합니다.

Wijmo Angular 컴포넌트는 Wijmo 관련 추가 설정 없이도 Zoneless 모드를 지원합니다. 런타임에서 Zone.js 환경과 Zoneless 환경을 자동으로 감지하고 이에 맞게 동작합니다.

기존 프로젝트에서 Zone.js 구성

기본 Zoneless 변경 감지 방식으로 생성된 기존 Angular 21 애플리케이션에 Wijmo를 추가하면서 Zone.js 방식을 다시 사용하려면 다음 단계를 따르시기 바랍니다.

1. zone.js 설치

npm install zone.js

2. angular.json의 polyfills에 zone.js 추가

angular.json 파일을 열고 build 및 test 대상의 polyfills 배열에 zone.js를 추가합니다.

{
    "projects": {
        "my-wijmo-app": {
            "architect": {
                "build": {
                    "options": {
                        "polyfills": ["zone.js"]
                    }
                },
                "test": {
                    "options": {
                        "polyfills": ["zone.js", "zone.js/testing"]
                    }
                }
            }
        }
    }
}

3. provideExperimentalZonelessChangeDetection을 provideZoneChangeDetection으로 변경

app.config.ts 파일을 열고 변경 감지 공급자를 다음과 같이 변경합니다.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
    providers: [
        provideZoneChangeDetection({ eventCoalescing: true })
    ]
};

애플리케이션을 실행하면 Wijmo FlexGrid가 Angular 애플리케이션에 정상적으로 통합된 것을 확인할 수 있습니다.

차트, 입력 컨트롤, 피벗 그리드 등 다양한 Wijmo 컴포넌트를 살펴보려면 Wijmo 데모를 참조하시기 바랍니다.