Informatique
Publié le 08/13/2017, rédigé 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](/university/frameworks/angular/104_add_select_component_in_view).

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 !

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité