feat(select): add selectlabel (#278)

Author: lukonik

projects/docs/src/app/examples/select/show-case-select/show-case-select.component.html

@@ -36,3 +36,19 @@
     </app-option-group>
   }
 </app-select>
+
+<p class="mt-4 mb-2">Custom label</p>
+<app-select
+  [formControl]="customLabelControl"
+  placeholder="Custom Label"
+  class="w-[250px]"
+>
+  <ng-template appSelectLabel let-options>
+    <ng-icon [svg]="options[0].value()"></ng-icon> {{ options[0].content }}
+  </ng-template>
+  @for (option of customOptions; track $index) {
+    <app-option [value]="option.value">
+      <ng-icon [svg]="option.value"></ng-icon> {{ option.label }}</app-option
+    >
+  }
+</app-select>

projects/docs/src/app/examples/select/show-case-select/show-case-select.component.ts

@@ -4,6 +4,13 @@ import { OptionComponent } from '@/ui/select/option.component';
 import { SelectComponent } from '@/ui/select/select.component';
 import { Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NgIcon } from '@ng-icons/core';
+import {
+  matBlender,
+  matElectricBolt,
+  matIron,
+} from '@ng-icons/material-icons/baseline';
+import { SelectLabelDirective } from '../../../../../../ngverse/src/lib/select/select-label.directive';
 const countries = [
   { code: 'KA', name: 'Georgia' },
   { code: 'US', name: 'United States' },
@@ -53,6 +60,12 @@ const directories = [
   },
 ];
 
+const customOptions = [
+  { label: 'Electricity', value: matElectricBolt },
+  { label: 'Blender', value: matBlender },
+  { label: 'Iron', value: matIron },
+];
+
 @Component({
   selector: 'doc-show-case-select',
   imports: [
@@ -61,16 +74,21 @@ const directories = [
     OptionComponent,
     OptionGroupComponent,
     OptionGroupLabelComponent,
+    SelectLabelDirective,
+    NgIcon,
   ],
   templateUrl: './show-case-select.component.html',
   styleUrl: './show-case-select.component.css',
 })
 export class ShowCaseSelectComponent {
   countries = countries;
   directories = directories;
+  customOptions = customOptions;
   formControlSingle = new FormControl(null, Validators.required);
 
   formControlMulti = new FormControl(['US', 'CA'], Validators.required);
 
   dirFormControl = new FormControl(null);
+
+  customLabelControl = new FormControl(null);
 }

projects/docs/src/app/features/select-page/select-page.component.ts

@@ -114,6 +114,13 @@ export class SelectPageComponent {
           },
         ],
       },
+      {
+        name: 'SelectLabelDirective',
+        type: 'directive',
+        selector: 'ng-template[appSelectLabel]',
+        description:
+          'The label of the select, you can use this directive instead of label input, when you need more customization. The template context will be the options array',
+      },
       {
         name: 'OptionGroupComponent',
         type: 'component',

projects/docs/src/tree-structure.json

@@ -893,6 +893,16 @@
           "name": "option.component.ts",
           "language": "ts"
         },
+        {
+          "path": "select/select-label.directive.spec.ts",
+          "name": "select-label.directive.spec.ts",
+          "language": "spec.ts"
+        },
+        {
+          "path": "select/select-label.directive.ts",
+          "name": "select-label.directive.ts",
+          "language": "ts"
+        },
         {
           "path": "select/select.component.css",
           "name": "select.component.css",

projects/ngverse/src/lib/select/select-label.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: 'ng-template[appSelectLabel]',
+})
+export class SelectLabelDirective {
+  templateRef = inject(TemplateRef<unknown>);
+}

projects/ngverse/src/lib/select/select.component.html

@@ -6,9 +6,22 @@
   (click)="togglePanel()"
   [disabled]="disabled()"
 >
-  <span class="flex-1 truncate text-left">{{
-    selectedOptionsLabel() || placeholder()
-  }}</span>
+  <span class="flex-1 truncate text-left">
+    @if (selectedOptionsLabel(); as selectedOptionsLabel) {
+      @if (templateLabel(); as templateLabel) {
+        <ng-container
+          *ngTemplateOutlet="
+            templateLabel.templateRef;
+            context: { $implicit: selectedOptions() }
+          "
+        ></ng-container>
+      } @else {
+        {{ selectedOptionsLabel }}
+      }
+    } @else {
+      {{ placeholder() }}
+    }
+  </span>
   <ng-icon
     class="transition-transform"
     [class.rotate-180]="isOpen()"

projects/ngverse/src/lib/select/select.component.spec.ts

@@ -70,7 +70,7 @@ describe('SelectComponent', () => {
     it('should display placeholder text when no value is selected', async () => {
       await fixture.whenStable();
       const selectButtonLabel = fixture.nativeElement.querySelector('span');
-      expect(selectButtonLabel.textContent).toBe('Select a country');
+      expect(selectButtonLabel.textContent.trim()).toBe('Select a country');
     });
 
     it('should display selected value label', async () => {

projects/ngverse/src/lib/select/select.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  contentChild,
   contentChildren,
   ElementRef,
   forwardRef,
@@ -22,11 +23,13 @@ import { PopoverOriginDirective } from '@/ui/popover/popover-origin.directive';
 import { PopoverComponent } from '@/ui/popover/popover.component';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
+import { NgTemplateOutlet } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { NgIcon } from '@ng-icons/core';
 import { matExpandMore } from '@ng-icons/material-icons/baseline';
 import { map } from 'rxjs';
 import { OptionComponent } from './option.component';
+import { SelectLabelDirective } from './select-label.directive';
 
 type OnTouchedFunction = (() => void) | undefined;
 
@@ -42,6 +45,7 @@ export type CompareWith = (o1: any, o2: any) => boolean;
     PopoverOriginDirective,
     PopoverComponent,
     NgIcon,
+    NgTemplateOutlet,
   ],
   templateUrl: './select.component.html',
   styleUrl: './select.component.css',
@@ -73,6 +77,8 @@ export class SelectComponent implements ControlValueAccessor, OnDestroy {
     inject(Injector)
   ).withTypeAhead();
 
+  templateLabel = contentChild<SelectLabelDirective>(SelectLabelDirective);
+
   selectOption = viewChild<ElementRef<HTMLElement>>('selectOption');
 
   compareWith = input<CompareWith, CompareWith>(