Angular 선택 구성 요소 개요

Angular Select는 미리 정의된 값 목록에서 단일 값을 선택하는 데 사용되는 양식 구성 요소입니다. Angular Select 구성 요소는 기본 HTML 선택 요소와 동일한 기능을 제공하지만 훨씬 더 많은 사용자 정의 옵션을 제공합니다. IgxDropDownComponent를 기반으로 하며 템플릿 작성, 가상화 및 드롭다운 목록 항목 사용자 정의를 포함한 모든 기능을 지원합니다.

Angular Select Example

다음은 기본적인 Angular 선택 예시입니다. 클릭할 때마다 열리는 여러 선택 항목 목록을 표시하는 간단한 상황에 맞는 메뉴가 있습니다.

Getting Started with Ignite UI for Angular Select

Ignite UI for Angular Select 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxSelectModule에서 app.module.ts 파일.

// app.module.ts
...
import { IgxSelectModule } from 'igniteui-angular';
// import { IgxSelectModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
    ...
    imports: [..., IgxSelectModule],
    ...
})
export class AppModule {}

또는 16.0.0부터 IgxSelectComponent 독립 실행형 종속성으로 가져오거나 IGX_SELECT_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_SELECT_DIRECTIVES } from 'igniteui-angular';
// import { IGX_SELECT_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-select [(ngModel)]="selected">
        <label igxLabel>Simple Select</label>
        <igx-select-item value="Orange">Orange</igx-select-item>
        <igx-select-item value="Apple">Apple</igx-select-item>
        <igx-select-item value="Banana">Banana</igx-select-item>
        <igx-select-item value="Mango">Mango</igx-select-item>
    </igx-select>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_SELECT_DIRECTIVES, FormsModule]
    /* or imports: [IgxSelectComponent, IgxSelectItemComponent, IgxLabelDirective, FormsModule] */
})
export class HomeComponent {
    public selected: string;
}

이제 Ignite UI for Angular 가져왔으므로 igx-select 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Select

선택할 항목 목록과 함께 igx-select 추가하세요. igx-select-item 사용하여 igx-select 포함된 항목을 표시합니다.

<igx-select>
    <label igxLabel>Simple Select</label>
    <igx-select-item value="Orange">Orange</igx-select-item>
    <igx-select-item value="Apple">Apple</igx-select-item>
    <igx-select-item value="Banana">Banana</igx-select-item>
    <igx-select-item value="Mango">Mango</igx-select-item>
</igx-select>

또 다른 방법은 *ngFor 구조 지시문을 사용하여 표시하려는 항목 컬렉션을 사용하는 것입니다.

public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];

<igx-select [(ngModel)]="selected">
    <label igxLabel>Simple Select</label>
    <igx-select-item *ngFor="let item of items" [value]="item">
        {{item}}
    </igx-select-item>
</igx-select>

기본적으로 Select 구성 요소는 입력 필드에 있는 항목 요소의 innerText 사용합니다. 더 복잡한 항목 템플릿의 경우 text 속성을 명시적으로 설정하여 이 항목을 선택할 때 입력 필드에 표시할 내용을 지정할 수 있습니다. 예를 들어:

<igx-select>
    <igx-select-item *ngFor="let item of items" [value]="item.value" [text]="item.text">
        {{item.text}} ( {{item.count}} )
    </igx-select-item>
</igx-select>

좀 더 정교한 항목 템플릿을 사용하여 text 속성이 작동하는 모습을 보려면 그룹으로 선택 섹션 아래의 그룹화 샘플을 확인하세요.

Input Properties

Select 구성 요소는 입력 그룹에 적용할 수 있는 다음 지시문을 지원합니다.

• igxLabel-Angular Select 입력과의 연결이 aria-labelledby 통해 자동으로 처리되므로 for 속성을 설정할 필요가 없습니다.
• igx-prefix / igxPrefix
• igx-suffix / igxSuffix- 내장된 토글 버튼 접미사는 항상 마지막에 표시됩니다.
• igx-hint / igxHint

<igx-select [(ngModel)]="selected">
    <label igxLabel>Pick a fruit</label>
    <igx-prefix>
        <span class="bio-prefix">BIO</span>
    </igx-prefix>
    <igx-suffix *ngIf="selected">
        <igx-icon (click)="clearSelection($event)">clear</igx-icon>
    </igx-suffix>
    <igx-hint>Choose a banana</igx-hint>
    <igx-select-item *ngFor="let item of items" [value]="item">
        {{item}}
    </igx-select-item>
</igx-select>

Note

Select 구성 요소에 대해 placeholder 지정되지 않고 선택 항목이 없으면 igxLabel 전환되어 자리 표시자가 있을 것으로 예상하는 위치에 나타납니다.

Group Select Items

항목 그룹을 시각적으로 구분하는 데 도움이 되도록 select 구성 요소는 <igx-select-item-group>에 항목을 래핑하여 항목 그룹화를 지원합니다. 이는 구성 요소를 선언하기 위해 반복될 수 있는 계층적 데이터에 가장 적합합니다. 다음 예에서 각 그룹에는 label과 items 컬렉션이 있습니다.

public greengrocery: Array<{ label: string, items: Array<{ type: string, origin: string }> }> = [
    { label: 'Fruits', items: [
            { type: 'Apple', origin: 'local' },
            { type: 'Orange', origin: 'import' },
            { type: 'Banana', origin: 'import'}
        ]
    },
    { label: 'Vegetables', items: [
            { type: 'Cucumber', origin: 'local' },
            { type: 'Potato', origin: 'import' },
            { type: 'Pepper', origin: 'local' }
        ]
    }
];

그런 다음 템플릿 파일에서 객체를 반복하고 그에 따라 해당 항목에 액세스할 수 있습니다.

<igx-select #select>
    <label igxLabel>Select With Groups</label>
    <igx-select-item-group *ngFor="let group of greengrocery" [label]="group.label">
        <igx-select-item *ngFor="let item of group.items" [value]="item.type" [text]="item.type">
            {{item.type}}
            <igx-icon
                title="Local product"
                *ngIf="item.origin === 'local'; else templateImport"
            >local_shipping</igx-icon>
            <ng-template #templateImport>
                <igx-icon title="Import product">flight</igx-icon>
            </ng-template>
        </igx-select-item>
    </igx-select-item-group>
</igx-select>

Header & Footer

현재 Select 구성 요소에 대한 기본 머리글 및 바닥글 템플릿은 없습니다. 그러나 igxSelectHeader 또는 igxSelectFooter로 각각 표시하여 머리글 또는 바닥글 템플릿을 추가할 수 있습니다. 이는 사용자 정의 템플릿이므로 스타일도 정의해야 합니다. 이 예에는 머리글과 바닥글 ng-템플릿이 모두 정의되어 있습니다. 헤더에는 igx-buttongroup 통해 구현된 기본 필터링이 있습니다. 바닥글에는 배송 방법에 따른 모든 항목의 정적 요약이 포함됩니다.

<igx-select>
    <label igxLabel>Pick your fruit</label>
    <igx-select-item *ngFor="let fruit of fruits" [value]="fruit.type" [text]="fruit.type" [ngSwitch]="fruit.delivery">
        {{fruit.type}}
        <igx-icon *ngSwitchCase="'flight'">flight</igx-icon>
        <igx-icon *ngSwitchCase="'train'">train</igx-icon>
        <igx-icon *ngSwitchCase="'boat'">directions_boat</igx-icon>
    </igx-select-item>
    <ng-template igxSelectHeader>
        <div class="custom-select-header">
            <span class="sample-template-heading">DELIVERY METHOD</span>
            <igx-buttongroup (click)="filter($event.target.title)">
                    <button igxButton title="flight"><igx-icon title="flight">flight</igx-icon></button>
                    <button igxButton title="train"><igx-icon title="train">train</igx-icon></button>
                    <button igxButton title="boat"><igx-icon title="boat">directions_boat</igx-icon></button>
            </igx-buttongroup>
        </div>
    </ng-template>
    <ng-template igxSelectFooter>
        <div class="custom-select-footer">
            <span class="sample-template-heading">TOTAL</span>
            <div class="sample-template-icons">
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="flight"
                        [class.important-icon]="selected === 'flight'"
                    >flight</igx-icon>
                    {{flightCount}}
                </span>
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="train"
                        [class.important-icon]="selected === 'train'"
                    >train</igx-icon>
                    {{trainCount}}
                </span>
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="boat"
                        [class.important-icon]="selected === 'boat'"
                    >directions_boat
                    </igx-icon>
                    {{boatCount}}
                </span>
            </div>
        </div>
    </ng-template>
</igx-select>

Custom Toggle Button in Angular Select

​igxSelectToggleIcon 지시문을 사용하거나 TemplateRef​ ​toggleIconTemplate 속성으로 설정하여 기본 토글 버튼을 사용자 정의할 수 있습니다.

<igx-select #select>
    ...
    <ng-template igxSelectToggleIcon let-collapsed>
        <igx-icon>{{ collapsed ? 'add_circle' : 'add_circle_outline'}}</igx-icon>
    </ng-template>
    ...
<igx-select>

Keyboard Navigation

• 선택 항목에 초점이 맞춰져 있는 동안 Space, Enter 또는 ALT + Up/Down Arrow 키를 클릭하여 igx-select select를 엽니다.
• ​ALT + Up/Down Arrow 조합이나 Enter, Space, Esc 또는 Tab 키 중 하나를 사용하여 igx-select를 닫습니다.
• ​Up/Down Arrow 키를 사용하면 항목을 탐색할 수 있습니다.
• ​Home 또는 End 키를 사용하면 목록의 첫 번째 항목과 마지막 항목으로 이동합니다.
• 해당 키를 눌러 특정 문자로 시작하는 목록 항목을 탐색할 수 있습니다.
• 이동하려는 항목의 처음 몇 글자를 빠르게 입력하여 특정 항목으로 이동할 수 있습니다.
• ​Enter 또는 Space 키를 사용하여 항목 선택

Note

igx-select​ ​단일 항목 선택만 지원합니다.

또한 끌어서 놓기 App Builder ™를 사용하여 다음 Angular 앱을 구축할 때 특정 프로세스를 자동화하고 과도한 수동 코딩의 필요성을 줄이는 방법을 확인할 수도 있습니다.

Custom Overlay Settings

사용자 정의 OverlaySettings 생성할 수 있습니다. 이렇게 하려면 먼저 템플릿을 다음과 같이 정의합니다.

<igx-select [overlaySettings]="customOverlaySettings">
    <igx-select-item *ngFor="let item of items">
        {{item}}
    </igx-select-item>
</igx-select>

• ​overlaySettings 속성이 사용자 정의 설정에 바인딩되는 위치입니다.

수업 내에는 다음과 같은 내용이 있습니다.

export class MyClass implements OnInit {
    @ViewChild(IgxSelectComponent)
    public select: IgxSelectComponent;
    public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Tomato'];
    public customOverlaySettings: OverlaySettings;

    public ngOnInit(): void {
        const positionSettings: PositionSettings = {
            closeAnimation: scaleOutBottom,
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Left,
            openAnimation: scaleInTop,
            verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        };
        this.customOverlaySettings = {
            target: this.select.inputGroup.element.nativeElement,
            positionStrategy: new ConnectedPositioningStrategy(
                positionSettings
            ),
            scrollStrategy: new AbsoluteScrollStrategy()
        };
    }
}

​ConnectedPositioningStrategy에 직접 전달되는 PositionSettings 객체를 생성하는 것을 볼 수 있습니다. 반드시 수행할 필요는 없지만 사용자 정의 위치 지정을 정의하고 싶기 때문에 이를 사용하여 전략의 기본 설정을 재정의합니다.

• ​ngOnInit 후크 내부에서 모든 설정을 지정할 수 있으며 이는 구성 요소 생성 시 템플릿에 자동으로 영향을 미칩니다.

또한 사용자 정의된 OverlaySettings 객체를 IgxSelectComponent의 열기 함수에 전달할 수도 있습니다. 여기서 템플릿은 다음과 같습니다.

<igx-select>
    <igx-select-item *ngFor="let item of items">
        {{item}}
    </igx-select-item>
</igx-select>

<button (click)="onClick($event)"></button>

그리고 수업에는 다음이 있습니다.

export class MyClass implements OnInit {
    /* -- */
    private otherCustomOverlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(),
        scrollStrategy: new AbsoluteScrollStrategy()
    }
    onClick(event: MouseEvent): void {
        this.select.open(this.otherCustomOverlaySettings)
    }
    /* -- */
}

Note

​open 함수와 템플릿 모두에서 사용자 정의 설정을 인수로 전달하는 경우 igx-select​ ​open 함수에 제공된 설정을 사용합니다. 그러나 설정을 opening 또는 opened와 같은 내부 이벤트에 바인딩하면 igx-select 템플릿에 제공된 설정을 사용합니다.

스타일링

모든 구성 요소에는 고유한 테마가 있습니다.

Select 스타일을 얻으려면 포함된 구성 요소에 스타일을 적용해야 합니다. 우리의 경우 input-group-theme과 drop-down-theme 을 모두 사용해야 합니다.

두 구성요소의 스타일을 지정하는 방법을 더 잘 이해하려면 Input Group 및 Drop Down 스타일 지정 섹션을 살펴보세요.

Note

​IgxSelectComponent는 IgxOverlay를 사용하여 igx-select-items 목록 컨테이너를 보유하고 표시합니다. 스타일의 범위를 적절하게 지정하려면 OverlaySetting.outlet을 사용해야 할 수도 있습니다. 자세한 내용은 IgxOverlay styling guide 확인하세요.

API Reference

• IgxSelectComponent
• IgxSelectItemComponent
• IgxDropDown구성요소
• IgxDropDownItemComponent
• 오버레이 설정
• Connected포지셔닝전략
• GlobalPosition전략
• AbsoluteScroll전략
• 위치 설정

Theming Dependencies

• IgxDropDown 테마
• IgxIcon 테마
• Igx오버레이 테마
• IgxInputGroup 테마

Additional Resources

• Ng모델
• ViewChild
• ngForOf

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub