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

Angular에서 Wijmo 사용하기

이번 가이드는 Wijmo의 FlexGrid를 독립적인 Angular 컴포넌트로 사용하여 Angular DataGrid를 빠르게 생성하는 방법을 안내합니다.

다음 몇 가지 단계를 통해 Angular DataGrid의 강력한 기능을 구해 보세요:


1. NPM으로 패키지 설치

npm install @mescius/wijmo.angular2.all

2. 그리드와 데이터 가져오기

  • 이번 단계에서는 필요한 모듈을 가져오고 Angular DataGrid에 바인딩할 데이터를 정의합니다.

  • 필요한 Wijmo 모듈을 imports 배열에 추가합니다.


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

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

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

Angular에서 마크업을 사용하여 FlexGrid의 모든 옵션을 선언할 수 있습니다. 여기에서는 FlexGrid와 그 열들을 선언합니다.

<wj-flex-grid #flex [itemsSource]="data" style="height: 500px;" (initialized)="init()"> 
<wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column> 
<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" format="n2"></wj-flex-grid-column> 
<wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" format="n2"></wj-flex-grid-column> 
</wj-flex-grid>

4. Wijmo CSS 추가

Wijmo 컨트롤이 올바르게 표시되고 작동하려면 Wijmo CSS 파일을 애플리케이션에 로드해야 합니다. 스타일은 @mescius/wijmo.styles npm 패키지에 포함되어 있습니다.

Angular CLI 애플리케이션에서는 기본 styles.css 파일 상단에 다음 import 문을 추가하여 스타일을 로드할 수 있습니다:

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

5. Angular 데이터 그리드 실행

이게 전부입니다! 애플리케이션을 실행하여 Angular DataGrid가 작동하는 모습을 확인해보세요