Seleccione un valor en una lista desplegable en Angular

En Angular 2, la directiva ngOptions se usa para crear una lista desplegable, la directiva ngFor para iterar a través de los valores desplegables y la directiva ngif para seleccionar un valor. Este artículo demostrará cómo seleccionar la lista desplegable en Angular.

Pasos para seleccionar un valor en una lista desplegable en Angular 2

Seleccionar un valor de una lista desplegable es una de las tareas más comunes en una aplicación web.

Se necesitan los siguientes pasos para seleccionar un valor en la lista desplegable en Angular 2.

Escribamos un ejemplo para aplicar los pasos mencionados anteriormente.

Código TypeScript (App.component.ts):

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    selectedOption = 0;
    actions = [{ id: 0, name: 'Select Country' },
    { id: 1, name: 'Netherland' },
    { id: 2, name: 'England' },
    { id: 3, name: 'Scotland' },
    { id: 4, name: 'Germany' },
    { id: 5, name: 'Canada' },
    { id: 6, name: 'Mexico' },
    { id: 7, name: 'Spain' }]
}

Un selector y una plantilla son los dos campos del objeto de metadatos @Component. El campo selector especifica un selector para un elemento HTML que representa el componente.

La plantilla le indica a Angular cómo mostrar la vista de este componente. Puede agregar una URL a un archivo HTML o poner HTML aquí.

Usamos la URL para apuntar a la plantilla HTML en este ejemplo. Después de eso, escribimos las opciones para mostrar en la terminal de salida.

Código TypeScript:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ AppComponent, HelloComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

El @NgModule define los metadatos para el módulo. BrowserModule realiza un seguimiento de los proveedores de servicios de aplicaciones importantes.

También incluye directivas estándar como ngIf y ngFor, que aparecen y pueden usarse en las plantillas de componentes de cualquier módulo de inmediato. La directiva ngModel requiere el módulo FormsModule.

La lista de declaraciones especifica el elemento de la aplicación y el elemento raíz, que se encuentra al principio de la jerarquía del componente de la aplicación. La matriz de declaraciones contiene una lista de módulos, comandos y conductos.

Código HTML (Aplicación.componente.html):

<h2>Example of how to select the value in the dropdown list in Angular 2</h2>
<select id="select-menu" [(ngModel)]="selectedOption" class="bx--text-input" required name="actionSelection" >
        <option  *ngFor="let action of actions"  [value]="action.id">{{action.name}}</option>
    </select>
<div>
    <div *ngIf="selectedOption==1">
        <div>Netherland is selected</div>
    </div>
    <div *ngIf="selectedOption==2">
        <div>England is selected</div>
    </div>
    <div *ngIf="selectedOption==3">
        <div>Scotland is selected</div>
    </div>
    <div *ngIf="selectedOption==4">
        <div>Germany is selected</div>
    </div>
    <div *ngIf="selectedOption==5">
        <div>Canada is selected</div>
    </div>
    <div *ngIf="selectedOption==6">
        <div>Mexico is selected</div>
    </div>
    <div *ngIf="selectedOption==7">
        <div>Spain is selected</div>
    </div>
</div>

En este código, usamos dos directivas, ngfor y ngif.

La directiva ngfor se utiliza para crear una lista de elementos. Puede ser un array simple o un objeto con algunas propiedades convertidas en un array.

La directiva ngfor generalmente se usa para iterar sobre un array y representar diferentes elementos DOM para cada elemento de la lista. Aquí, el propósito de ngfor es crear una lista de países.

En segundo lugar, usamos ngif, una directiva en Angular que crea una declaración if-else. También se puede usar con ngElse, ngSwitch y ngShow/ngHide.

La directiva solo muestra el código HTML cuando la expresión se evalúa como verdadera. Si se evalúa como falso, no generará nada.

Aquí, ngif solo mostrará el país seleccionado.

Haga clic aquí para ver la demostración en vivo del código anterior.