Option sélectionnée dans la liste déroulante Angular

Nous présenterons comment définir une option sélectionnée dans une liste déroulante Angular, définir une option sélectionnée à partir d’un tableau d’options et définir une option sélectionnée si les options sont dynamiques dans Angular.

Définir l’option sélectionnée dans la liste déroulante Angular

Cet article discutera de la définition d’une option sélectionnée pour la liste déroulante Angular. Lors de la création d’une liste déroulante avec plusieurs options, aucune option n’est sélectionnée automatiquement.

Donc, nous allons d’abord créer une liste déroulante et définir une option sélectionnée, et nous discuterons de différents scénarios sur la meilleure façon de définir une option sélectionnée lorsque les options sont statiques ou dynamiques ou lorsque nous avons un tableau d’options.

Dans app.component.html, nous allons créer un formulaire de sélection.

# angular
<select [(ngModel)]='ngDropdown' name="dropdownOption" id="dropdownOption" class='form-control'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Comme on le voit dans ce code, nous avons utilisé [(ngModel)], qui crée une instance FormControl et la lie à un élément de contrôle de formulaire.

Nous allons ajouter du CSS dans app.component.css pour améliorer notre formulaire déroulant.

# angular
.form-control{
  padding: 5px 10px;
  background-color: rgb(52, 119, 179);
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: rgb(52, 119, 179);
}

Production :

Nous pouvons voir qu’aucune option n’est sélectionnée, mais toutes les options apparaissent lorsque vous cliquez dessus.

Pour définir une option comme sélectionnée, nous pouvons attribuer la valeur à la variable ngDropdown dans le app.component.ts. En regardant notre code depuis le app.component.html, nous verrons que nous avons déjà attribué la variable [(ngModel)]='ngDropdown'.

Essayons de définir 1 comme valeur par défaut.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngDropdown = 1;
}

Après avoir attribué l’option sélectionnée, nous remarquons que la liste déroulante affiche 1 comme option sélectionnée. De cette façon, nous pouvons sélectionner n’importe quelle option en tant qu’option sélectionnée dans Angular.

Production :

Définir l’option sélectionnée à partir d’un tableau d’options

Nous verrons comment définir une valeur par défaut à partir d’un tableau d’options.

Tout d’abord, nous allons créer deux variables : ngDropdown, l’option par défaut pour notre menu déroulant, et la seconde sera ngOptions qui aura toutes les options que nous voulons afficher dans les options du menu déroulant.

Ajoutons donc ce code dans le app.component.ts.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [1,2,3,4,5,6,7,8,9,10]
  ngDropdown = 1;
}

Dans le tableau ngOptions, nous définissons des valeurs de 1 à 10 ; dans ngDropdown, nous définissons 1 comme valeur par défaut.

Nous allons créer un formulaire de sélection dans le app.component.html.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

Dans ce code, nous verrons que nous définissons [selected] sur ngDropdown, il sera donc automatiquement sélectionné lorsqu’une option est identique à ngDropdown.

Production :

Option sélectionnée à partir des valeurs dynamiques

Nous discuterons de la définition d’une option sélectionnée si nous avons des valeurs dynamiques pour les options. Premièrement, nous allons créer deux variables ; l’un sera ngDropdown, l’option par défaut pour notre formulaire de sélection, et le second sera ngOptions qui aura toutes les valeurs que nous voulons afficher dans les options déroulantes.

Nous savons qu’il y aura des valeurs dynamiques, alors prenons un tableau de nombres aléatoires et définissons l’option sélectionnée pour le deuxième élément de ce tableau.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [3,6,1,4,2,10,7,5,9,8]
  ngDropdown = this.ngOptions[1];
}

Le app.component.html aura le code suivant.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

Production :

Ainsi, nous pouvons voir que le deuxième élément de ce tableau est défini comme une option sélectionnée. Nous pouvons changer cela en changeant l’index d’un tableau.

Ce didacticiel nous a appris à définir l’option sélectionnée pour la liste déroulante Angular. Nous avons également discuté de trois scénarios différents de sélection d’options lorsque les valeurs sont statiques, dynamiques ou un tableau.