사용자가 온라인에서 상호 작용하는 가장 일반적인 입력 유형 중 하나인 드롭다운을 통해 사용자는 다양한 항목 중에서 선택할 수 있습니다. 많은 조직에서는 사용자가 온라인 양식을 정확하게 완료할 수 있도록 드롭다운 메뉴를 사용합니다. 국가, 언어를 선택하거나 가능한 응답이 적은 경우 질문에 응답하는 데 사용됩니다.

많은 오픈 소스 및 서드파티 드롭 다운 컨트롤은 <select> 요소를 통한 기본 HTML 요소일 뿐 아니라 온라인에서 사용할 수 있습니다. 여러분은 무엇을 선택하시겠습니까?

Wijmo에서는 최고의 Angular 드롭다운 컨트롤인 ComboBox를 제공합니다. 간편하게 구현하고 쉽게 사용자 정의할 수 있으며 다른 컨트롤과 컴포넌트에 쉽게 통합할 수 있는 광범위한 기능을 포함하고 있습니다.

이 문서에서는 ComboBox의 다음 기능을 간략하게 설명합니다.

• 드롭다운 구현

• ComboBox 컨트롤 스타일 지정

• 드롭다운 요소 사용자 정의

• 다른 컴포넌트와 드롭다운 컨트롤 통합

아래 링크를 통해 샘플 프로젝트를 다운로드하실 수 있습니다.

샘플 프로젝트 다운로드

드롭다운 구현

Wijmo의 Angular 드롭다운인 ComboBox를 구현하기 전에 install Wijmo의 컴포넌트 라이브러리를 설치해야 합니다. Angular 응용 프로그램 내에서 다음 명령을 실행합니다.

npm i @grapecity/wijmo.angular2.all

이렇게 하면 Angular 컨트롤의 집합에 필요한 모든 Wijmo 파일이 설치됩니다.

다음으로 Wijmo의 스타일 지정 및 ComboBox 모듈을 포함해야 합니다. app.module.ts 파일 내에서 다음을 포함합니다.

import { WjInputModule } from '@grapecity/wijmo.angular2.input';
...
imports: [
   ...
   WjInputModule
],

스타일을 위해 응용 프로그램의 styles.css 파일 상단에서 다음을 포함합니다.

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

이제 응용 프로그램이 ComboBox 컨트롤을 만들 수 있도록 설정되었습니다. app.component.ts 파일 내에서 드롭다운을 채우도록 몇 가지 더미 데이터를 만들겠습니다.

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 countries = ['US', 'UK', 'China', 'Russia', 'Germany', 'India', 'Italy', 'Canada'];
}

국가 배열을 만들었으며 이는 사용자에게 app.component.html 파일 내부에서 선택할 수 있는 기능을 제공합니다.

<h2>ComboBox Blog</h2>
<wj-combo-box [itemsSource]="countries"></wj-combo-box>

이제 실행 중인 ComboBox를 보기 위해 응용 프로그램을 실행할 수 있습니다.

보시다시피 Wijmo의 Angular 드롭다운은 모든 데이터를 정돈되게 표시합니다. 다음으로 ComboBox의 외관을 사용자 정의해 보겠습니다.

ComboBox 컨트롤 스타일 사용자 정의

Wijmo의 ComboBox는 다른 모든 컨트롤과 함께 고도의 사용자 정의가 가능합니다. 이 샘플의 경우에는 다크모드 외관을 위해 드롭다운을 수정하겠습니다.

한 가지 언급하자면 Wijmo의 핵심 CSS 클래스 일부를 사용자 정의하는 경우 효과가 적용되도록 styles.css 파일 내부에 이러한 변경 사항을 구현해야 합니다.

.wj-control .wj-input-group .wj-form-control {
   background: hsl(0, 0%, 15%);
   color: hsl(0, 0%, 70%);
   font-weight: bold;
   padding: 10px 16px 8px;
   font-size: 16px;
}

.wj-control .wj-input-group .wj-input-group-btn {
   background: hsl(0, 0%, 15%);
}

.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover {
   background: hsl(0, 0%, 30%);
   transition: .4s;
}

.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover .wj-glyph-down {
   color: hsl(0, 0%, 85%);
   transition: .4s;
}

.wj-combobox {
   border-radius: 0px;
   border: 1px solid rgba(0, 0, 0, 0.5);
}

.wj-listbox-item {
   background: hsl(0, 0%, 15%);
   color: hsl(0, 0%, 70%);
}

.wj-listbox-item.wj-state-selected {
   background: hsl(0, 0%, 30%);
}

.wj-control .wj-input-group .wj-input-group-btn:last-child:not(:first-child)>.wj-btn {
   border-left: 1px solid hsl(0, 0%, 70%);
}

.combo-dropdown > .wj-listbox-item:hover {
   cursor: pointer;
   background: hsl(0, 0%, 30%) !important;
   transition: .3s;
}

.wj-glyph-down {
   color: hsl(0, 0%, 70%);
}

여기에는 상당히 많은 양의 코드가 있지만 저희가 하고 있는 작업은 ComboBox의 크기와 색상을 수정하는 것입니다. 드롭 다운에서 모든 흰색을 검은색으로 변경하고 사용자가 목록 요소 위에 마우스를 올려놓을 때 그레이 호버 효과를 어둡게 하고 패딩을 일부 컨트롤에 추가하여 조금 더 많은 공간을 제공합니다. 이제 응용 프로그램을 실행하면 다음과 같은 결과 화면을 볼 수 있습니다.

드롭다운 요소 사용자 정의

이제 배열에서 데이터를 가져오는 것은 기본적인 작업입니다. 대부분의 시나리오에서는 코드에서 데이터를 만들지 않지만 데이터베이스에서 이를 받고 대부분의 경우 문자열의 배열이 아니지만 받을 객체의 배열이 됩니다. 하지만 좋은 점은 ComboBox는 API 호출에서 데이터를 추가하기 쉬우며 이 추가 데이터를 사용하여 ComboBox의 드롭다운 요소를 추가적으로 사용자 정의할 수 있다는 것입니다.

첫 번째로 해야 할 일은 데이터 소스에서 데이터를 가져오는 것입니다. 이 문서에서는 각 국가에 대한 일부 데이터를 반환할 API에 HTTP GET 요청을 만들 것입니다. 이를 위해 응용 프로그램에서 HttpClient 모듈을 포함하고 데이터 서비스를 만들어 데이터를 가져오도록 하겠습니다. app.module.ts 파일 내에서 다음 가져오기를 추가합니다.

import { HttpClientModule } from 'angular/common/http';
...
imports: [
   ...
   HttpClientModule
],

그리고 다음 명령을 실행하면 데이터 서비스를 생성할 수 있습니다.

ng g s data

이렇게 하면 앱 폴더 내에 data.service.ts 파일이 만들어지며 응용 프로그램에 등록됩니다. 다음으로 data.service.ts 파일을 열고 다음을 추가합니다.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  dataSetURL = 'https://mocki.io/v1/eaf8d0a8-052c-4d2a-b105-da40855634fa';

  constructor(private http: HttpClient) {}

  getDataSet() {
    return this.http.get(this.dataSetURL);
  }
}

여기에서 할 것은 API에서 데이터를 포함할 HTTP GET 호출에서 생성되는 Observable을 반환하는 작업이 전부입니다. 이제 app.component.ts 파일 내에서 다음으로 작성한 코드를 바꿔보겠습니다.

import { Component } from '@angular/core';
import { DataService } from './data.service'

import * as wjcCore from '@grapecity/wijmo';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dataSet: any;

  constructor(private dataService: DataService) {
    dataService.getDataSet().subscribe((data) => {
      this.dataSet = new wjcCore.CollectionView(data, {});
    });
  }
}

이 파일에는 변경한 사항이 몇 가지 있습니다. 먼저 데이터 서비스와 wjcCore라는 항목을 가져옵니다. 이는 다른 모든 컴포넌트에서 참조하는 Wijmo의 핵심 라이브러리입니다. 이를 사용하여 Wijmo에서 컴포넌트의 데이터 소스를 관리하는 데 사용하는 객체인 CollectionView를 만들어 보겠습니다. CollectionView를 만들지 않고 대신 배열을 Wijmo 컨트롤에 전달하면 자체 CollectionView가 만들어집니다. 이 CollectionView는 철저하게 중요해지지만 지금은 더 이상 걱정할 필요가 없습니다.

또한 HTTP GET 호출에서 반환되는 Observable을 구독하고 Obserable에서 반환하는 데이터를 사용하여 CollectionView를 데이터로 채우겠습니다. 이제 응용 프로그램을 실행하면 다음과 같은 결과 화면을 볼 수 있습니다.

보시다시피 이것은 저희가 표시하고자 한 내용이 아닙니다. 이것은 드롭다운에 대한 데이터 소스로 객체를 드롭하였기 때문에 보이는 것이므로 목록에 있는 각 항목이 객체임을 보여 줍니다. 다행히 Wijmo의 Angular 드롭다운을 통해 표시하고자 하는 내용을 정확하게 컴포넌트에 쉽게 알릴 수 있습니다. app.component.html 파일 내에서는 일부 속성을 ComboBox 컨트롤에 추가하겠습니다.

<wj-combo-box [itemsSource]="dataSet" [displayMemberPath]="'country'" [headerPath]="'country'" [dropDownCssClass]="'combo-dropdown'"></wj-combo-box>

여기에서는 2가지 속성인 displayMemberPath 및 headerPath를 설정합니다. displayMemberPath 속성은 컨트롤에 표시하고자 하는 객체의 속성을 알리며 headerPath는 ComboBox에 컨트롤의 텍스트 상자 부분에 표시하고자 하는 속성을 알립니다. 일반적으로는 displayMemberPath만 설정해야 하지만 이 문서에서는 드롭다운 요소에 표시하는 항목도 수정합니다. 여기에서 headerPath가 들어옵니다. 이를 통해 드롭다운 요소의 표시 값과 입력 요소의 표시 값을 분리할 수 있습니다.

마지막으로 템플릿을 ComboBox에 추가하겠습니다. Wijmo를 사용하면 기본 표시 텍스트를 재정의하는 데 사용되는 많은 컨트롤의 사용자 정의 템플릿을 만들 수 있습니다. app.component.html 파일 내에서 다음 코드를 추가합니다.

<wj-combo-box [itemsSource]="dataSet" [displayMemberPath]="'country'" [headerPath]="'country'" [dropDownCssClass]="'combo-dropdown'">
<ng-template wjItemTemplate let-item="item" let-itemIndex="itemIndex">
  <div class="item">
      <div class="itemHeader"><img src="{{item.flag}}" alt=""> <b>{{item.country}}</b></div>
      Sales: <b>${{item.sales}}</b><br>
      Expenses: <b>${{item.expenses}}</b>
  </div>
</ng-template>
</wj-combo-box>

각 드롭다운 요소를 생성하는 데 사용되는 기본 HTML을 대체할 ng-template을 사용하여 wjItemTemplate을 만들겠습니다. item 변수는 각 드롭다운 요소의 속성을 보유하는 데 사용되며 이는 이러한 속성을 참조하는 경우 개체에서 사용하는 동일한 속성 이름을 사용할 수 있다는 의미입니다.

외관을 약간 정리하도록 app.component.css 파일 내에 일부 CSS도 추가하겠습니다.

.item {
   margin: 2px;
}

.itemHeader {
   font-size: 16px;
   margin-bottom: 4px;
}

이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.

이제 각 국가의 깃발과 현재 판매 및 비용을 표시하는 다크 테마의 드롭다운 컨트롤이 있습니다. 아주 좋습니다! 이제 거의 완료했습니다. 해야 할 일이 아직 하나 남았습니다. ComboBox를 다른 컨트롤에 연결해야 합니다. 다음 섹션에서 이 방법에 대해 다루겠습니다.

다른 컴포넌트와 드롭다운 컨트롤 통합

이 응용 프로그램에서의 마지막 단계는 Wijmo의 Angular 드롭다운을 다른 컨트롤에 연결하여 함께 작동하도록 하는 것입니다. 이 샘플에서는 Wijmo의 FlexGrid 컨트롤을 사용하겠습니다. 먼저 app.module.ts 파일 내에 필요한 모듈을 가져와야 합니다.

import { WjGridModule } from 'angular/common/http';
...
imports: [
   ...
   WjGridModule
],

다음으로 FlexGrid를 app.component.html 파일에 추가하겠습니다.

<wj-flex-grid [itemsSource]="dataSet" [selectionMode]="'Row'">
<wj-flex-grid-column header="Country" binding="country" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column header="Sales" binding="sales" [format]="'c2'"></wj-flex-grid-column>
<wj-flex-grid-column header="Expenses" binding="expenses" [format]="'c2'"></wj-flex-grid-column>
</wj-flex-grid>

이 코드의 대부분은 이 문서와 관련이 없지만 제가 다룰 중요한 한 가지는 각 컨트롤에 동일한 데이터 소스를 사용한다는 점입니다. 즉, CollectionView 객체인 dataSet입니다. 이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.

CollectionView 객체는 컨트롤을 함께 연결할 수 있습니다. 두 개의 다른 컨트롤에서 동일한 CollectionView를 사용하는 경우 하나에 만들어진 변경 사항은 다른 하나에 반영됩니다. ComboBox 및 FlexGrid의 경우 사용자가 드롭다운에서 다른 항목을 선택하면 그리드의 섹션이 동일한 항목과 일치되도록 변경됩니다. 또한 사용자가 FlexGrid의 셀을 변경하는 경우 이러한 변경 사항은 ComboBox에 반영됩니다.

이를 표시하도록 국가 열에서 "그리스"를 "멕시코"로 변경하면 다음 내용을 볼 수 있습니다.

보시다시피 드롭다운의 국가 이름이 "그리스"에서 "멕시코"로 변경되었으며 그리드에서 선택한 행이 드롭다운에서 선택한 항목과 일치되도록 변경되었습니다.

결론

보시다시피 Wijmo의 ComboBox를 사용하여 매우 강력하고 유용한 Angular 드롭다운을 빌드할 수 있습니다. 이 블로그에서는 ComboBox로 할 수 있는 사항을 짧게 다루었습니다. 더 많은 정보를 원하시는 경우 개발자가 사용할 수 있는 데모, 문서 및 API 참조가 있습니다. 완성된 응용 프로그램을 다운로드하려면 여기에서 찾아볼 수 있습니다.

지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

• Wijmo 공식 홈페이지
• Wijmo 튜토리얼 및 샘플
• Wijmo Q&A
• Wijmo FAQ