Informatique
Publié le 08/11/2017, rédigé par Chloé MAHALIN

Angular 4

Ajouter un composant HTML Select à ma vue

Prérequis
- [structure d'un projet Angular](/university/frameworks/angular/002_structure_of_an_angular_component).

Objectif

Notre objectif est de voir comment rajouter un select dans la vue avec Angular

Ajouter un composant select simple dans la vue

Créons un composant simple :

myComponent.html

<div>
    <select [(ngModel)]="selected">
        <option [ngValue]="''"> -- Choisir -- </option>
        <option [ngValue]="'FRANCE'">France</option>
        <option [ngValue]="'CANADA'">Canada</option>
        <option [ngValue]="'MAROC'">Maroc</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;
}

Je vous épargne la rédaction du css

Pour résumer ! Nous disposons dans la vue d'un select dont la valeur est liée à la variable 'selected' du model de mon composant.

Lorsqu'une sélection aura lieu

Le mapping de la valeur se fait simplement depuis l'attribut ngModel

Ajouter un composant select dans un formulaire

Techniquement

myComponent.html

<div>
    <form [formGroup]="myForm">
        <select formControlName="country">
            <option [ngValue]="''"> -- Choisir -- </option>
            <option [ngValue]="'FRANCE'">France</option>
            <option [ngValue]="'CANADA'">Canada</option>
            <option [ngValue]="'MAROC'">Maroc</option>
        </select>
        {{myForm.value.country}}
    <form>
</div>

myComponent.ts


import { Component } from '@angular/core';
import { FormBuilder
    - FormGroup } from '@angular/forms';

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

  private formBuilder: FormBuilder;
  myForm: FormGroup;

  constructor(formBuilder: FormBuilder) {
    this.formBuilder = formBuilder;
    this.createForm();
  }

  private createForm(): any {
    this.myForm = this.formBuilder.group({
      country: ''
    });
  }

}

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é