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 oIgxSelectModule arquivo no 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 {}

Alternativamente,16.0.0 você pode importarIgxSelectComponent como uma dependência independente ou usar oIGX_SELECT_DIRECTIVES token 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 ou diretivas Ignite UI for Angular Select, pode começar a usar oigx-select componente.

Using the Angular Select

Adicione issoigx-select junto com uma lista de itens para escolher. Usamosigx-select-item para exibir os itens que contémigx-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>

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á oinnerText elemento do item no campo de entrada. Em casos com modelos de itens mais complexos, você pode definir explicitamente atext propriedade para especificar o que exibir no campo de entrada quando esse 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 atext propriedade em ação com modelos de itens um pouco mais sofisticados, confira a seção de agrupamento abaixo Selecionar com Grupos.

Input Properties

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

• igxLabel- Não é necessário definir afor propriedade, pois a ligação com a entrada Angular Select é feita automaticamente via.aria-labelledby​
• igx-prefix/igxPrefix
• igx-suffix/igxSuffix- Note que o sufixo do botão de alternância embutido 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 nãoplaceholder for especificado para o componente Select e não houver nenhuma seleção feita, a transiçãoigxLabel será feita e aparecerá onde você esperaria que o marcador de lugar estivesse.

Group Select Items

Para ajudar a separar visualmente os 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 possui umalabel e uma coleção deitems:

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 existem modelos padrão de cabeçalho e rodapé para o componente Select. No entanto, você pode adicionar um cabeçalho ou um modelo de rodapé marcando-os respectivamente comigxSelectHeader ou.igxSelectFooter Como são modelos personalizados, você também deve definir o estilo deles. Neste exemplo, existem templates ng-de cabeçalho e rodapé definidos. No cabeçalho há um filtro básico, implementado viaigx-buttongroup. O rodapé inclui um resumo estático de todos os itens, baseado 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 padrão de alternar, usando aigxSelectToggleIcon diretiva ou definindo aTemplateRef natoggleIconTemplate propriedade.

<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 clicandoigx-select nasSpace​Enter teclas ouALT + Up/Down Arrow, enquanto o select está focado.
• Feche usandoigx-select aALT + Up/Down Arrow combinação ou qualquer uma dasEnter,Space​Esc ouTab teclas do tipo.
• Usando asUp/Down Arrow teclas você vai navegar pelos itens.
• Usar asHome teclas de ouEnd vai te levar até o primeiro e o último item da 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 asEnter teclas de ouSpace​

Note

igx-selectsuporta apenas uma 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 personalizadosOverlaySettings. Para isso, você primeiro define seu modelo assim:

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

• Onde aoverlaySettings propriedade 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 tanto como argumento naopen função quanto no template,igx-select usará a que é fornecida naopen função. No entanto, se você vincular as configurações a um evento interno, comoopening ouopened entãoigx-select usará as configurações fornecidas no modelo.

Estilização

Select Theme Property Map

Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

Propriedade primária	Propriedade dependente	Descrição
$toggle-botão de fundo	$toggle-botão em primeiro plano	Cor em primeiro plano do botão de alternar
	$toggle-botão cheio de primeiro plano	Cor em primeiro plano quando o botão de alternar é preenchido
	$toggle-botão-fundo-foco	Cor de fundo quando focado
	$toggle-botão-fundo-foco--borda (bootstrap/índigo)	Contexto quando focado na variante de borda (Bootstrap/Indigo)
	$toggle-botão de foco em primeiro plano	Cor em primeiro plano quando o botão de alternar está focado

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

Para que o componente Select seja estilizado, você precisa estilizar seus componentes que contêm o estilo. No nosso caso, esses são o tema do grupo de entrada e o tema suspenso. Dê uma olhada nasInput Group seções de eDrop Down de estilo para entender melhor como estilizar esses dois componentes.

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

@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 oselect-theme e fornece apenas o$toggle-button-background parâmetro. A função tema calculará automaticamente todas as cores correspondentes de fundo e primeiro plano para os diferentes estados com base nesse valor único.

$custom-select-theme: select-theme(
  $toggle-button-background: #57a5cd,
);

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

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

Styling with Tailwind

Você pode estilizar a seleção usando nossas classes utilitárias personalizadas do Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

• Uselight-* as aulas para o tema da luz.
• Usedark-* classes para o tema sombrio.
• Adicione o nome do componente após o prefixo, por exemplo,light-select,dark-select.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema seletivo. A sintaxe é a seguinte:

<igx-select
  class="!light-select ![--toggle-button-background:#99BAA6]">
  ...
</igx-select>

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, sua seleção deve ficar assim:

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