Descripción general del componente de selección Angular

Angular Select es un componente de formulario que se utiliza para seleccionar un valor único de una lista de valores predefinidos. El componente Angular Select proporciona una funcionalidad idéntica al 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 la creación de 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 por 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 a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxSelectModule en el archivo 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, a partir de 16.0.0, puede importar IgxSelectComponent como una dependencia independiente o usar el token IGX_SELECT_DIRECTIVES 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 ha importado la Ignite UI for Angular Select, puede comenzar a usar el componente igx-select.

Using the Angular Select

Agregue igx-select junto con una lista de elementos para elegir. Usamos igx-select-item para mostrar los elementos que contiene 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>

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>

De forma predeterminada, el componente Seleccionar utilizará el innerText del elemento del elemento en el campo de entrada. En casos con plantillas de elementos más complejas, puede establecer explícitamente la propiedad text para especificar qué mostrar en el campo de entrada cuando se selecciona 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 la propiedad de text en acción con plantillas de elementos un poco más sofisticadas, consulte el ejemplo de agrupación debajo de la sección Seleccionar con grupos.

Input Properties

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

• igxLabel: no es necesario configurar la propiedad for, ya que el enlace con la entrada Angular Select se maneja automáticamente a través de aria-labelledby.
• igx-prefix / igxPrefix
• igx-suffix / igxSuffix: tenga en cuenta que el sufijo del botón de alternancia integrado siempre se mostrará 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 no se especifica ningún placeholder para el componente Seleccionar y no se realiza ninguna selección, igxLabel realizará la transición y aparecerá donde se esperaría que estuviera el marcador de posición.

Group Select Items

Para ayudar a separar visualmente los grupos de elementos, el componente de selección admite la agrupación de elementos envolviéndolos 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 una label y una colección 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' }
        ]
    }
];

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 hay plantillas de encabezado y pie de página predeterminadas para el componente Seleccionar. Sin embargo, puede agregar una plantilla de encabezado o pie de página marcándolos respectivamente con igxSelectHeader o igxSelectFooter. Como se trata de plantillas personalizadas, también debes definir su estilo. En este ejemplo, hay plantillas ng de encabezado y pie de página definidas. En el encabezado hay un filtrado básico, implementado mediante igx-buttongroup. El pie de página incluye un resumen estático de todos los artículos, 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

Puede personalizar el botón de alternancia predeterminado, utilizando la directiva igxSelectToggleIcon o estableciendo un TemplateRef en la propiedad 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 igx-select haciendo clic en las teclas Space, Enter o ALT + Up/Down Arrow, mientras la selección está enfocada.
• Cierre igx-select usando la combinación ALT + Up/Down Arrow o cualquiera de las teclas Enter, Space, Esc o Tab.
• Usando las teclas Up/Down Arrow navegará a través de los elementos.
• El uso de las teclas Home o End lo llevará al primer y último elemento 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.
• Seleccione un elemento usando las teclas Enter o Space​

Note

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

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

Custom Overlay Settings

Puede crear OverlaySettings personalizados. Para hacer esto, primero define su plantilla de esta manera:

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

• Donde la propiedad overlaySettings está vinculada a su configuración personalizada.

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 pasa su configuración personalizada como argumento en la función open y en la plantilla, igx-select usará la proporcionada en la función open. Sin embargo, si vincula la configuración a un evento interno, como opening o opened, igx-select utilizará la configuración proporcionada en la plantilla.

Estilismo

Cada componente tiene su propio tema.

Para darle estilo a la Selección, debe aplicar estilo a los componentes que lo contienen. En nuestro caso, necesitamos usar tanto el tema del grupo de entrada como el tema desplegable.

Eche un vistazo a las secciones de estilo Input Group y Drop Down para comprender mejor cómo diseñar esos dos componentes.

Note

​IgxSelectComponent usa IgxOverlay para contener y mostrar el contenedor de lista igx-select-items. Para definir correctamente el alcance de sus estilos, es posible que deba utilizar un OverlaySetting.outlet. Para obtener más detalles, consulta la IgxOverlay styling guide.

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 angulares
• Ignite UI for Angular GitHub