콤보박스 템플릿

    Ignite UI for Angular 헤더, 푸터, 항목, 빈 목록 및 추가 버튼과 같은 다양한 영역에 대한 사용자 정의 템플릿을 정의할 수 있습니다.

    Angular ComboBox Templates Example

    Usage

    ComboBox 컴포넌트를 시작하려면 먼저 다음 부품을 가져와야 합니다IgxComboModule 당신의 app.module.ts 파일:

    import { IgxComboModule } from 'igniteui-angular/combo';
// import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxComboModule,
        ...
    ]
})
export class AppModule {}

    Template Types

    콤보박스 템플릿을 정의할 때 다음과 같은 미리 정의된 참조 이름을 사용하여 참조해야 합니다.

    Item template

    선택기[igxComboItem] 사용:

    <igx-combo #templateCombo [data]="lData" [valueKey]="'field'" >
    <ng-template igxComboItem let-display let-key="valueKey">
        <div class="item">
            <span class="state">{{ display[key] }}</span>
            <span class="region">{{ display.region }}</span>
        </div>
    </ng-template>
</igx-combo>

    Header Item template

    선택기[igxComboHeaderItem] 사용:

    <igx-combo #templateCombo [data]="lData" [groupKey]="'region'">
    <ng-template igxComboHeaderItem let-display let-key="groupKey">
        <div class="header-item">Region: {{ display[key] }}</div>
    </ng-template>
</igx-combo>

    Header template

    선택기[igxComboHeader] 사용:

    <igx-combo>
    <ng-template igxComboHeader>
        <div class="header-class">State - Region</div>
    </ng-template>
</igx-combo>

    선택기[igxComboFooter] 사용:

    <igx-combo>
    <ng-template igxComboFooter>
        <div class="footer-class">Infragistics 2018</div>
    </ng-template>
</igx-combo>

    Empty template

    선택기[igxComboEmpty] 사용:

    <igx-combo>
    <ng-template igxComboEmpty>
        <span class="empty-class">No available states</span>
    </ng-template>
</igx-combo>

    Add template

    선택기[igxComboAddItem] 사용:

    <igx-combo>
    <ng-template igxComboAddItem>
        <button igxButton="flat">
            Add Location
        </button>
    </ng-template>
</igx-combo>

    Toggle Icon Template

    선택기[igxComboToggleIcon] 사용:

    <igx-combo>
    <ng-template igxComboToggleIcon let-collapsed>
        <igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon>
    </ng-template>
</igx-combo>

    Clear Icon Template

    선택기[igxComboClearIcon] 사용:

    <igx-combo>
    <ng-template igxComboClearIcon>
        <igx-icon>cancel</igx-icon>
    </ng-template>
</igx-combo>

    Templating ComboBox Input

    템플릿igxComboClearIcon​igxComboToggleIcon과 셀렉터를 함께 사용할 때는 콤보박스 입력에서 해당 버튼의 표시 방식을 변경하세요. 콘텐츠 내부igx-combo에 전달하면 컴보박스 입력을 템플릿화하는 방식(사용igx-input-group, andigx-prefix)igx-suffix과igxLabel 유사하게 템플릿화도 가능합니다. 아래 코드 스니펫은 콤보박스 입력에 적절한 라벨과 접두사를 추가하는 방법을 보여줍니다:

    <igx-combo>
    <label igxLabel>Locations</label>
    <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
</igx-combo>

    API Summary

    Additional Resources

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