Descripción general del componente de selección Angular

Angular Select es un componente de formulario que se utiliza para seleccionar un único valor de una lista de valores predefinidos. El componente Angular Select proporciona una funcionalidad idéntica a la del elemento de selección HTML nativo, pero ofrece muchas más opciones de personalización. Se basa en IgxDropDownComponent y admite todas sus funciones, incluidas las plantillas, la virtualización y la personalización de los elementos de la lista desplegable.

Angular Select Example

A continuación se muestra un ejemplo básico de selección Angular. Tiene un menú contextual simple que muestra una lista de varias opciones que se abren con cada clic.

Getting Started with Ignite UI for Angular Select

Para comenzar con el componente Ignite UI for Angular Select, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar elIgxSelectModule archivo en el 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 puedes importarlosIgxSelectComponent como una dependencia independiente, o usar elIGX_SELECT_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

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

Ahora que tienes importado el módulo o las directivas Ignite UI for Angular Select, puedes empezar a usar eligx-select componente.

Using the Angular Select

Añade estoigx-select junto con una lista de artículos para elegir. Usamosigx-select-item para mostrar los objetos queigx-select contiene.

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

Otra forma de hacerlo sería utilizar una colección de elementos que queremos mostrar usando la directiva estructural *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 defecto, el componente Select usará elinnerText de del elemento elemento en el campo de entrada. En casos con plantillas de elementos más complejas, puedes establecer explícitamente latext propiedad para especificar qué mostrar en el campo de entrada cuando se seleccione este elemento. Por ejemplo:

<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 latext propiedad en acción con plantillas de elementos un poco más sofisticadas, consulta la sección de agrupación que aparece abajo Seleccionar con Grupos.

Input Properties

El componente Seleccionar admite las siguientes directivas aplicables al grupo de entrada:

• igxLabel- No es necesario establecer lafor propiedad, ya que el enlace con la entrada Angular Select se gestiona automáticamente mediantearia-labelledby​
• igx-prefix/igxPrefix
• igx-suffix/igxSuffix- Ten en cuenta que el sufijo de botón de palanca integrado siempre aparecerá al final.
• 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

Si noplaceholder se especifica para el componente Select y no se realiza ninguna selección, laigxLabel transición y aparecerá donde esperarías que estuviera el marcador de posición.

Group Select Items

Para ayudar a separar visualmente los grupos de elementos, el componente select soporta agrupar elementos envolviendo elementos en un<igx-select-item-group>. Esto funciona mejor con datos jerárquicos que se pueden iterar para declarar los componentes. En el siguiente ejemplo, cada grupo tiene unalabel y una colección 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' }
        ]
    }
];

Luego, en su archivo de plantilla puede iterar sobre los objetos y acceder a sus elementos en consecuencia:

<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

Actualmente, no existen plantillas predeterminadas de cabecera y pie de página para el componente Select. Sin embargo, puedes añadir un encabezado o una plantilla de pie marcándolos respectivamente conigxSelectHeader oigxSelectFooter. Como son plantillas personalizadas, deberías definir también su estilo. En este ejemplo, existen tanto plantillas ng-de encabezado como de pie definidas. En el encabezado hay un filtrado básico, implementado a través deigx-buttongroup El pie de página incluye un resumen estático de todos los elementos, según el 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

Puedes personalizar el botón de alternancia por defecto, usando laigxSelectToggleIcon directiva o configurando aTemplateRef latoggleIconTemplate propiedad.

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

Keyboard Navigation

• Abre laigx-select tecla haciendo clic en lasSpace​Enter teclas oALT + Up/Down Arrow, mientras selecciona está enfocada.
• Cierra usandoigx-select laALT + Up/Down Arrow combinación o cualquiera de las, oEnter alguna de lasSpace,Esc​Tab o clave.
• Usar lasUp/Down Arrow teclas permitirá navegar por los objetos.
• Usar lasHome teclas de orEnd te llevará a los primeros y últimos elementos de la lista.
• Puede navegar por los elementos de la lista, comenzando con un determinado carácter, presionando la tecla correspondiente.
• Puede navegar a un elemento específico escribiendo rápidamente los primeros caracteres del elemento al que desea ir.
• Selecciona un elemento usando lasEnter teclas oSpace​

Note

igx-selectsolo admite una selección única de elementos.

También puede probar el App Builder ™de arrastrar y soltar para ver cómo automatiza ciertos procesos y reduce la necesidad de una codificación manual excesiva al crear su próxima aplicación Angular.

Custom Overlay Settings

Puedes crear personalizadosOverlaySettings. Para hacer esto, primero defines tu plantilla de la siguiente manera:

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

• Donde laoverlaySettings propiedad está vinculada a tus ajustes personalizados.

Dentro de tu clase, tendrías 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()
        };
    }
}

Puede ver que creamos un objeto PositionSettings que se pasa directamente a nuestra ConnectedPositioningStrategy, no es necesario hacerlo, pero como queremos definir un posicionamiento personalizado, los usamos para anular la configuración predeterminada de la estrategia.

• Puede establecer todas las configuraciones dentro del gancho ngOnInit y esto afectará automáticamente su plantilla tras la generación del componente.

También puede pasar un objeto OverlaySettings personalizado a la función abierta de IgxSelectComponent, donde su plantilla debería verse así:

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

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

Y tu clase tiene lo siguiente:

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

Note

Si pasas tus ajustes personalizados tanto como argumento en laopen función como en la plantilla,igx-select usarás la que aparece en laopen función. Sin embargo, si asignas los ajustes a un evento interno, comoopening oopened entoncesigx-select usarás los ajustes que se proporcionan en la plantilla.

Estilismo

Select Theme Property Map

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Propiedad principal	Propiedad dependiente	Descripción
$toggle-fondo de botones	$toggle-botón en primer plano	Color en primer plano del botón de alternancia
	$toggle-lleno de botones en primer plano	Color del primer plano cuando se llena el botón de interruptor
	$toggle-botón-fondo-enfoque	Color de fondo cuando se enfoca
	$toggle-botón-fondo-enfoque--borde (bootstrap/índigo)	Fondo cuando se enfoca en la variante de borde (Bootstrap/Índigo)
	$toggle-botón-primer plano-enfoque	Color del primer plano cuando el botón de alternancia está enfocado

Cada componente tiene su propia función de tema.

Para que el componente Select sea estilizado, tienes que estilizar sus componentes que contienen. En nuestro caso, estos son el tema de grupo de entrada y el tema desplegable. Echa un vistazo a lasInput Group secciones de yDrop Down de estilismo para entender mejor cómo estilizar esos dos componentes.

También tenemos unaselect-theme función que solo se usa para estilizar el botón de nuestro componente Select.
Para empezar a estilizar el botón Select component, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

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

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

Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende elselect-theme y proporciona solo el$toggle-button-background parámetro. La función de tema calculará automáticamente todos los colores de fondo y primer plano correspondientes para los diferentes estados basándose en este único valor.

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

El último paso es pasar el tema de radio personalizado en nuestra aplicación:

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

Styling with Tailwind

Puedes estilizar la selección usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

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

El archivo de utilidad incluye variantes tantolight comodark de tema.

• Usalight-* clases para el tema ligero.
• Usadark-* clases para el tema oscuro.
• Añadir el nombre del componente después del prefijo, por ejemplo, ,light-select,dark-select.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el select-theme. La sintaxis es la siguiente:

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

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final, tu selección debería verse así:

API Reference

• Componente IgxSelect
• Componente IgxSelectItem
• Componente IgxDropDown
• Componente IgxDropDownItem
• Configuración de superposición
• ConectadoEstrategiaPosicionamiento
• Estrategia de posición global
• Estrategia de desplazamiento absoluto
• Configuración de posición

Theming Dependencies

• Tema desplegable Igx
• Tema IgxIcon
• Tema IgxOverlay
• Tema IgxInputGroup

Additional Resources

• NgModelo
• VerNiño
• ngForOf

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub