Angular 구성요소

Wijmo Angular 컴포넌트는 개별 npm 패키지로 제공됩니다. 각 패키지는 해당 코어 라이브러리와 동일한 이름을 사용하며, 호환성을 위해 기존의 "angular2" 접두사가 유지됩니다. 예를 들어 @mescius/wijmo.angular2.grid는 @mescius/wijmo.grid용 Angular 연동 컴포넌트를 제공합니다.

각 컴포넌트를 개별적으로 설치하거나 @mescius/wijmo.angular2.all 패키지를 사용하여 한 번에 모두 설치할 수 있습니다.

npm install @mescius/wijmo.angular2.all

Wijmo npm 패키지에 대한 자세한 내용은 Wijmo 패키지 참조를 확인하시기 바랍니다.

WjGridModule은 Wijmo Angular Grid 래퍼의 모듈 기반 진입점입니다. 기존 NgModule 기반 애플리케이션과의 호환성을 위해 계속 제공됩니다. 새 독립형 Angular 애플리케이션에서는 WjFlexGrid, WjFlexGridColumn과 같이 필요한 Wijmo 컴포넌트를 직접 가져오시기 바랍니다.

코드에서 Wijmo 컨트롤을 생성하려면 Angular 연동 모듈이 아닌 해당 코어 모듈의 Wijmo 컨트롤을 사용합니다. 즉, 코드에서 FlexGrid 컨트롤을 생성할 때는 "wijmo.angular2.grid"가 아니라 "wijmo.grid"를 사용합니다.

import { FlexGrid } from '@mescius/wijmo.grid';
let flex = new FlexGrid('#host_element');

Wijmo CSS 추가

Wijmo는 다음 두 파일이 포함된 @mescius/wijmo.styles npm 패키지를 제공합니다.

• wijmo.css: 모든 컨트롤의 스타일을 포함합니다.

• wijmo-core.css: wijmo.css의 축소 버전으로, Enterprise 컨트롤의 스타일은 포함하지 않습니다.

다음 방법 중 하나를 사용하여 Angular 애플리케이션에 스타일을 추가할 수 있습니다.

• 기본 styles.css:다음 import 문을 추가하여 스타일을 가져옵니다.

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

• Angular.json: angular.json에 다음 경로를 추가합니다.

../node_modules/@mescius/wijmo.styles/wijmo.css

Angular 마크업 구문

Wijmo Angular 컴포넌트는 일관된 명명 규칙을 사용하므로 템플릿에서 쉽게 참조할 수 있습니다. 컴포넌트 이름에는 다음 규칙이 적용됩니다.

• Wijmo 컴포넌트의 HTML 요소 이름은 소문자와 하이픈 형식을 사용합니다. 예를 들어 WjInputNumber 컴포넌트는 wj-input-number로 작성합니다.

<wj-input-number [(value)]="amount"></wj-input-number>

• Wijmo 특성 지시문의 클래스 이름은 camelCase 형식을 사용합니다. 예를 들어 WjFlexGridCellTemplate 지시문은 wjFlexGridCellTemplate 특성을 사용하여 정의할 수 있습니다.

<template
  wjFlexGridCellTemplate
  [cellType]="'Cell'">
</template>

• Wijmo 컴포넌트의 속성과 이벤트에 사용하는 특성 이름은 컴포넌트 클래스 인터페이스에 정의된 속성 및 이벤트 이름과 정확히 일치합니다.

  • 단방향 바인딩에는 속성 이름을 대괄호로 묶습니다. 예: [isReadOnly]

  • 양방향 바인딩에는 대괄호와 괄호를 함께 사용합니다. 예: [(value)]

  • 이벤트 이름은 괄호로 묶습니다. 예: (valueChanged)

<wj-input-number
  [(value)]="amount"
  [format]="'n0'"
  [isReadOnly]="true"
  (valueChanged)="valueChanged($event)">
</wj-input-number>

위 예제에서 각 바인딩은 다음과 같은 의미를 가집니다.

• [(value)]="amount": 컴포넌트 속성에 대한 양방향 바인딩

• [format]="'n0'": 문자열에 대한 단방향 바인딩

• [isReadOnly]="true": 불리언 값에 대한 단방향 바인딩

• (valueChanged)="valueChanged($event)": 이벤트 바인딩

• 바인딩 표현식은 해당 속성의 형식과 동일한 형식의 값으로 평가되어야 합니다.

  • 위 코드에서 문자열 형식의 format 속성 값인 'n0'은 작은따옴표로 묶여 있으며 문자열 리터럴을 나타냅니다. 따옴표를 생략하고 n0만 지정하면 해당 표현식은 속성 이름으로 해석됩니다.

  • 마찬가지로 불리언 형식의 isReadOnly 속성에는 따옴표 없이 true를 바인딩합니다. true는 불리언 상수이지만, 작은따옴표로 묶인 'true'는 문자열 리터럴을 의미합니다.

이벤트 처리기

Wijmo 이벤트 처리기는 두 개의 매개변수, 즉 sender 인수와 이벤트 인수를 받는 함수로 정의됩니다.

Angular의 EventEmitter는 이벤트 발생 지점에서 구독자에게 하나의 매개변수만 전달할 수 있습니다. 이 매개변수는 템플릿 마크업에서 $event 지역 변수의 값으로 접근할 수 있습니다. Wijmo 이벤트는 이 매개변수를 통해 이벤트 인수를 전달합니다.

<wj-flex-grid
  [itemsSource]="data"
  (deletingRow)="beforeDelete($event)">
</wj-flex-grid>

위 예제에서 $event에는 CellRangeEventArgs 객체가 포함됩니다.

이벤트 처리기에서 sender와 이벤트 인수를 모두 받으려면 컴포넌트에 대한 템플릿 지역 변수를 정의한 다음 이벤트 인수와 함께 전달합니다.

<wj-flex-grid
  #flex
  [itemsSource]="data"
  (deletingRow)="beforeDelete(flex, $event)">
</wj-flex-grid>

위 예제에서 flex 지역 변수는 그리드 컴포넌트 인스턴스를 참조하며, 처리기에는 sender인 flex와 이벤트 인수인 $event가 함께 전달됩니다.

initialized 이벤트

모든 Wijmo Angular 컴포넌트에는 initialized 이벤트가 있습니다. 이 이벤트는 컨트롤이 페이지에 추가되고 초기화된 후 발생합니다.

마크업에서 속성을 설정하는 것 외에 추가적인 초기화 작업이 필요한 경우 이 이벤트를 사용할 수 있습니다.

HTML

<wj-flex-grid
  #flex
  (initialized)="initGrid(flex)">
</wj-flex-grid>

TypeScript

export class AppComponent {
  constructor() {
    this.data = ...;
  }

  // FlexGrid에 사용자 지정 병합 관리자 추가
  initGrid(flex) {
    flex.mergeManager = new CustomMerge(flex);
  }
}