Sélectionnez une valeur dans une liste déroulante dans Angular

Dans Angular 2, la directive ngOptions est utilisée pour créer une liste déroulante, la directive ngFor pour parcourir les valeurs déroulantes et la directive ngif pour sélectionner une valeur. Cet article montrera comment sélectionner la liste déroulante dans Angular.

Étapes pour sélectionner une valeur dans une liste déroulante dans Angular 2

La sélection d’une valeur dans une liste déroulante est l’une des tâches les plus courantes dans une application Web.

Les étapes suivantes sont nécessaires pour sélectionner une valeur dans la liste déroulante dans Angular 2.

Écrivons un exemple pour appliquer les étapes mentionnées ci-dessus.

Code 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 sélecteur et un modèle sont les deux champs de l’objet de métadonnées @Component. Le champ de sélecteur spécifie un sélecteur pour un élément HTML qui représente le composant.

Le modèle indique à Angular comment afficher la vue de ce composant. Vous pouvez soit ajouter une URL à un fichier HTML, soit mettre du HTML ici.

Nous avons utilisé l’URL pour pointer vers le modèle HTML dans cet exemple. Après cela, nous avons écrit les options à afficher dans le terminal de sortie.

Code 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 { }

Le @NgModule définit les métadonnées du module. BrowserModule garde une trace des principaux fournisseurs de services d’application.

Il inclut également des directives standard telles que ngIf et ngFor, qui apparaissent et peuvent être utilisées immédiatement dans les modèles de composants de n’importe quel module. La directive ngModel nécessite le module FormsModule.

La liste des déclarations spécifie l’élément app et l’élément racine, qui se trouve au début de la hiérarchie des composants de l’application. Le tableau de déclarations contient une liste des modules, des commandes et des canaux.

Code HTML (App.component.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>

Dans ce code, nous avons utilisé deux directives, ngfor et ngif.

La directive ngfor est utilisée pour créer une liste d’éléments. Il peut s’agir d’un simple tableau ou d’un objet avec certaines propriétés converties en tableau.

La directive ngfor est généralement utilisée pour itérer sur un tableau et afficher différents éléments DOM pour chaque élément de la liste. Ici, le but de ngfor est de créer une liste de pays.

Deuxièmement, nous avons utilisé ngif, une directive dans Angular qui crée une instruction if-else. Il peut également être utilisé avec ngElse, ngSwitch et ngShow/ngHide.

La directive ne restitue le code HTML que lorsque l’expression est évaluée à true. S’il est évalué à false, il n’affichera rien.

Ici, ngif affichera uniquement le pays sélectionné.

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.