Visão geral do componente Angular Select

Angular Select é um componente de formulário usado para selecionar um único valor de uma lista de valores predefinidos. O Angular Select Component fornece funcionalidade idêntica ao elemento select HTML nativo, mas oferece muito mais opções de personalização. Ele é baseado no IgxDropDownComponent e suporta todos os seus recursos, incluindo modelagem, virtualização e personalização dos itens da lista suspensa.

Angular Select Example

Abaixo está um exemplo básico Angular Select. Ele tem um menu contextual simples que exibe uma lista de várias escolhas abrindo por clique.

Getting Started with Ignite UI for Angular Select

Para começar a usar o componente Ignite UI for Angular Select, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxSelectModule no arquivo 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 {}

Como alternativa, a partir da 16.0.0, você pode importar o IgxSelectComponent como uma dependência autônoma ou usar o token IGX_SELECT_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// 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;
}

Agora que você importou o módulo Ignite UI for Angular Select ou as diretivas, você pode começar a usar o componente igx-select.

Using the Angular Select

Adicione o igx-select junto com uma lista de itens para escolher. Usamos igx-select-item para exibir os itens que o igx-select contém.

<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>

Outra maneira de fazer isso seria usar uma coleção de itens que queremos exibir usando a diretiva estrutural *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>

Por padrão, o componente Select usará o innerText do elemento item no campo de entrada. Em casos com modelos de itens mais complexos, você pode definir explicitamente a propriedade text para especificar o que exibir no campo de entrada quando este item for selecionado. Por exemplo:

<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>

Para ver a propriedade text em ação com modelos de itens um pouco mais sofisticados, verifique o exemplo de agrupamento abaixo da seção Selecionar com grupos.

Input Properties

O componente Select suporta as seguintes diretivas aplicáveis ao Grupo de Entrada:

• igxLabel- Não há necessidade de definir a propriedade for, pois a vinculação com a entrada Angular Select é feita automaticamente via aria-labelledby.
• igx-prefix / igxPrefix
• igx-suffix / igxSuffix- Observe que o sufixo do botão de alternância integrado sempre será exibido por último.
• 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

Se nenhum placeholder for especificado para o componente Selecionar e nenhuma seleção for feita, o igxLabel fará a transição e aparecerá onde você esperaria que o espaço reservado estivesse.

Group Select Items

Para ajudar a separar visualmente grupos de itens, o componente select suporta agrupamento de itens ao envolver itens em um <igx-select-item-group>. Isso funciona melhor com dados hierárquicos que podem ser iterados para declarar os componentes. No exemplo a seguir, cada grupo tem um label e uma coleção de 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' }
        ]
    }
];

Então, no seu arquivo de modelo, você pode iterar sobre os objetos e acessar seus itens adequadamente:

<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

Atualmente, não há modelos de cabeçalho e rodapé padrão para o componente Select. No entanto, você pode adicionar um modelo de cabeçalho ou rodapé marcando-os respectivamente com igxSelectHeader ou igxSelectFooter. Como esses são modelos personalizados, você também deve definir o estilo deles. Neste exemplo, há ng-templates de cabeçalho e rodapé definidos. No cabeçalho, há uma filtragem básica, implementada via igx-buttongroup. O rodapé inclui um resumo estático de todos os itens, com base no método de entrega.

<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

Você pode personalizar o botão de alternância padrão usando a diretiva igxSelectToggleIcon ou definindo um TemplateRef para a propriedade 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

• Abra o igx-select clicando nas teclas Space, Enter ou ALT + Up/Down Arrow enquanto o select estiver em foco.
• Feche o igx-select usando a combinação ALT + Up/Down Arrow ou qualquer uma das teclas Enter, Space, Esc ou Tab.
• Usar as teclas Up/Down Arrow navegará pelos itens.
• Usar as teclas Home ou End navegará até o primeiro e o último item na lista.
• Você pode navegar pelos itens da lista, começando com um determinado caractere, pressionando a tecla correspondente.
• Você pode navegar até um item específico digitando rapidamente os primeiros caracteres do item que deseja acessar.
• Selecione um item usando as teclas Enter ou Space​

Note

igx-select suporta apenas uma única seleção de itens.

Você também pode experimentar o App Builder ™ de arrastar e soltar para ver como ele automatiza certos processos e reduz a necessidade de codificação manual excessiva ao criar seu próximo aplicativo Angular.

Custom Overlay Settings

Você pode criar OverlaySettings personalizados. Para fazer isso, primeiro defina seu template assim:

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

• Onde a propriedade overlaySettings está vinculada às suas configurações personalizadas.

Dentro da sua classe, você teria algo como:

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()
        };
    }
}

Você pode ver que criamos um objeto PositionSettings que é passado diretamente para nossa ConnectedPositioningStrategy, não é obrigatório fazer isso, mas como queremos definir um posicionamento personalizado, os usamos para substituir as configurações padrão da estratégia.

• Você pode definir todas as configurações dentro do gancho ngOnInit e isso afetará automaticamente seu modelo na geração do componente.

Você também pode passar um objeto OverlaySettings personalizado para a função open do IgxSelectComponent, onde seu modelo deve ficar assim:

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

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

E sua classe tem o seguinte:

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

Note

Se você passar suas configurações personalizadas como um argumento na função open e no template, igx-select usará a fornecida na função open. No entanto, se você vincular as configurações a um evento interno, como opening ou opened, igx-select usará as configurações fornecidas no template.

Estilização

Cada componente tem sua própria função temática.

Para estilizar o componente Select, você precisa estilizar os componentes que o contêm. No nosso caso, esses são o input-group-theme e o drop-down-theme. Dê uma olhada nas seções de estilo Input Group e Drop Down para entender melhor como estilizar esses dois componentes.

Também temos uma função select-theme que é usada apenas para estilizar o botão do nosso componente Select.
Para começar a estilizar o botão do componente Selecionar, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Seguindo a abordagem mais simples, criamos um novo tema que estende o select-theme e aceita alguns dos parâmetros do tema padrão:

$custom-select-theme: select-theme(
  $toggle-button-background: #2b2b2b,
  $toggle-button-background-focus: #808080,
);

O último passo é passar o tema de rádio personalizado em nossa aplicação:

@include css-vars($custom-select-theme);

API Reference

• Componente IgxSelect
• Componente IgxSelectItem
• Componente IgxDropDown
• Componente IgxDropDownItem
• Configurações de sobreposição
• Estratégia de posicionamento conectado
• Estratégia de posição global
• Estratégia AbsoluteScroll
• Configurações de posição

Theming Dependencies

• Tema IgxDropDown
• Tema IgxIcon
• Tema IgxOverlay
• Tema IgxInputGroup

Additional Resources

• NgModel
• Ver criança
• ngParaDe

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub