création d'un composant générique de gestion de liste déroulante (GenericSelectComponent)

src/app/components/generic-select/generic-select.component.html

+<div class="btn-group" dropdown (click)="onSelect($event)">
+    <button dropdownToggle class="btn btn-primary dropdown-toggle waves-light my-1" type="button" mdbRippleRadius>
+        {{currentLabel}}
+    </button>
+    <div class="dropdown-menu">
+        <a class="dropdown-item" *ngFor="let e of entries" [value]=entryValue(e)>{{entryLabel(e)}}</a>
+    </div>
+</div>
\ No newline at end of file

src/app/components/generic-select/generic-select.component.ts

+import { Component, Input, Output, EventEmitter } from "@angular/core";
+
+import { SelectField, } from "../../formulaire/select-field";
+import { SelectEntry } from "../../formulaire/select-entry";
+import { FormulaireService } from "../../services/formulaire/formulaire.service";
+
+/*
+  exemple de template :
+  <div class="btn-group col-12 col-sm-9" dropdown (click)="onSelect($event)">
+    <button dropdownToggle class="btn btn-primary dropdown-toggle waves-light my-1" type="button" mdbRippleRadius>
+        {{currentLabel}}
+    </button>
+    <div class="dropdown-menu">
+        <a class="dropdown-item" *ngFor="let e of entries" [value]=e.value>{{e.label}}</a>
+    </div>
+  </div>
+*/
+
+export abstract class GenericSelectComponent {
+    // valeur actuellement sélectionnée
+    // la valeur est le code non affiché repérant une entrée de la liste (cf. [value] dans le templace)
+    private _selectedValue: any;
+
+    /**
+     * selected value event
+     */
+    @Output()
+    private selectChange = new EventEmitter<string>();
+
+    private get currentLabel(): string {
+        if (this._selectedValue != undefined)
+            for (let e of this.entries)
+                if (this.entryValue(e) == this._selectedValue)
+                    return this.entryLabel(e);
+
+        return "<no selection>";
+    }
+
+    private onSelect(event: any) {
+        this._selectedValue = event.target.value;
+        this.selectChange.emit(this._selectedValue);
+    }
+
+    /**
+     * liste des objets sélectionnables
+     */
+    protected abstract get entries(): any[];
+
+    /**
+     * calcule la "valeur" d'une entrée
+     */
+    protected abstract entryValue(entry: any): string;
+
+    /**
+     * calcule l'étiquette d'une entrée (ce qui est affiché dans la liste déroulante)
+     */
+    protected abstract entryLabel(entry: any): string;
+}