adaptation du composant SelectFieldLineComponent à MDBootstrap

src/app/components/select-field-line/select-field-line.component.ts

@@ -6,12 +6,16 @@ import { FormulaireService } from '../../services/formulaire/formulaire.service'
 @Component({
     selector: 'select-field-line',
     templateUrl: "./select-field-line.html",
+    styles: [
+        // Titre de la ligne
+        `.select_title {
+            text-align: right;
+        }`
+    ]
 })
 export class SelectFieldLineComponent {
     private _select: SelectField;
 
-    private currentValue: string;
-
     constructor(private formulaireService: FormulaireService) {
     }
 
@@ -19,6 +23,12 @@ export class SelectFieldLineComponent {
         return this._select.entries;
     }
 
+    private get currentLabel(): string {
+        if (this._select.selectedEntry != undefined)
+            return this._select.selectedEntry.label;
+        return "<no selection>";
+    }
+
     /**
     * id input attribute
     */
@@ -38,8 +48,6 @@ export class SelectFieldLineComponent {
 
     private updateSelect() {
         this._select = this.formulaireService.getSelectField(this._id);
-        if (this._select.selectedEntry != undefined)
-            this.currentValue = this._select.selectedEntry.value;
     }
 
     private onSelect(event: any) {

src/app/components/select-field-line/select-field-line.html

-<tr>
-    <td align="right">{{_select.label}}</td>
-    <td colspan="3">
-        <select [(ngModel)]=currentValue (change)=onSelect($event)>
-    <option *ngFor="let e of entries" [value]=e.value>{{e.label}}</option>
-</select>
-    </td>
-</tr>
\ No newline at end of file
+<div class="container-fluid">
+    <div class="row">
+        <!-- titre -->
+        <div class="col-3 select_title">
+            {{_select.label}}
+        </div>
+
+        <!-- liste déroulante -->
+        <div class="col-4 col-sm-3">
+            <div class="btn-group" dropdown (click)="onSelect($event)">
+                <button dropdownToggle class="btn grey darken-3 dropdown-toggle waves-light" 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>
+        </div>
+    </div>
+</div>
\ No newline at end of file