[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

Angular에서 Wijmo 사용하기

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

1. Wijmo 패키지 설치

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

3. Angular DataGrid 마크업 추가

1. Wijmo 패키지 설치

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

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

npm install @mescius/wijmo.angular2.all

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

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

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

import { Component,ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router'; 
import { WjGridModule, WjFlexGrid } from '@mescius/wijmo.angular2.grid';

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

@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);}}

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

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

3. Angular 데이터그리드 마크업 추가

Angular에서는 마크업을 통해 FlexGrid의 모든 옵션을 선언할 수 있습니다.

이번 예제에서는 app.component.html 파일에 Angular DataGrid 마크업을 추가하고, FlexGrid와 그에 포함될 열들을 선언합니다.

Angular의 마크업 문법 및 이벤트 초기화 방법에 대한 자세한 내용은 Angular Components 문서를 참고해주시기 바랍니다.

<wj-flex-grid #flex[itemsSource]="data"(initialized)="flexInitialized(flex)">
 <wj-flex-grid-column [header]="'Country'" [binding]="'country'" width="2*">
 </wj-flex-grid-column><wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" width="*" format="n2">
 </wj-flex-grid-column><wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" width="*" format="n2">
 </wj-flex-grid-column>
</wj-flex-grid>

앱을 실행하면, Angular 애플리케이션에 Wijmo FlexGrid가 성공적으로 통합된 것을 확인할 수 있습니다. 또한 차트, 입력 컨트롤, 피벗 그리드와 같은 다른 Wijmo 컴포넌트도 쉽게 추가할 수 있습니다.

다양한 Wijmo 컴포넌트를 직접 확인하려면 Wijmo 데모를 참고하시기 바랍니다.