|
Publié le par Chloé MAHALIN

Angular 4

Ajouter des options à un composant HTML select depuis une liste dans le modèle

Prérequis, ajouter un select à une vue.

Objectif

Notre objectif est de voir comment rajouter des options à un composant select depuis une liste dans le modèle.

Ajouter des options depuis le modèle à un select

myComponent.html

<div>
    <select [(ngModel)]="selected">
        <option [ngValue]="''"> -- Choisir -- </option>    <!-- Notre valeur par défaut. On la laisse afin de permettre la sélection vide -->
        <option *ngFor="let country of countries" [ngValue]="country.value">{{country.name}}</option>
    </select>
    {{selected}}
</div>

myComponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'myComponent-tag',
  templateUrl: './myComponent.html',
  styleUrls: ['./myComponent.css']
})
export class MyComponent {

  selected: string;
  countries = [
       {value: 'FRANCE', name: 'France'},
       {value: 'CANADA', name: 'Canada'},
       {value: 'MAROC', name: 'MAROC'}
     ];
}

Et voilà !

Et n'oubliez pas de tester votre code !