feat: added the possibility to insert a default option and to insert …

…the options directly from html in the select component
italia · Jul 14, 2023 · 7c77572 · 7c77572
1 parent 41a12f2
commit 7c77572
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/projects/design-angular-kit/src/lib/components/form/select/select.component.html b/projects/design-angular-kit/src/lib/components/form/select/select.component.html
@@ -6,6 +6,12 @@
           (blur)="markAsTouched()"
           [attr.aria-describedby]="id + '-description'">
 
+    <option *ngIf="defaultOption" [value]="null" disabled selected>
+      {{defaultOption}}
+    </option>
+
+    <ng-content></ng-content>
+
     <ng-container *ngIf="options">
       <option *ngFor="let option of options" [disabled]="optionIsDisabled(option)" [value]="option.value">
         {{option.text ?? option.value}}

diff --git a/projects/design-angular-kit/src/lib/components/form/select/select.component.ts b/projects/design-angular-kit/src/lib/components/form/select/select.component.ts
@@ -28,6 +28,12 @@ export class ItSelectComponent extends ItAbstractFormComponent implements OnInit
    */
   @Input() description?: string;
 
+  /**
+   * If set, add a `disabled selected` option with value `null` and as text the value of the attribute
+   * @example 'Select an option'
+   */
+  @Input() defaultOption?: string;
+
   override ngOnInit() {
     super.ngOnInit();
 

diff --git a/src/app/select/select-example/select-example.component.html b/src/app/select/select-example/select-example.component.html
@@ -1,19 +1,24 @@
 <h3>Select</h3>
 <div class="bd-example">
   <p class="example-section">
-    <it-select 
+    <it-select
       id="default-select"
       label="Etichetta"
       [(ngModel)]="selectedValue"
-      [options]="selectOptions">
+      [options]="selectOptions"
+      defaultOption="Seleziona un elemento">
+
+      <!--Puoi inserire gli option da html o dall'attributo options-->
+      <option [value]="1">Opzione 1</option>
+
     </it-select>
   </p>
 
 
   <h4>Risultato</h4>
 
   <div class="example-section">
-    
+
     <div class="example-selected-value">Valore selezionato: {{selectedValue}}</div>
   </div>
 </div>

diff --git a/src/app/select/select-example/select-example.component.ts b/src/app/select/select-example/select-example.component.ts
@@ -9,11 +9,6 @@ import { SelectControlOption } from 'projects/design-angular-kit/src/public_api'
 export class SelectExampleComponent {
   selectedValue: number = null;
   selectOptions: Array<SelectControlOption> = [
-    { value: null, text: 'Seleziona un elemento', selected: true, disabled: true },
-    {
-      value: 1,
-      text: 'Opzione 1'
-    },
     {
       value: 2,
       text: 'Opzione 2'