SiCustomSelectDirective documentation¶

Host directive for building custom selects.

Add this as a hostDirective on your component and expose the inputs/outputs you need. The directive handles: - ControlValueAccessor: ControlValueAccessor integration ( formControl , ngModel , [(value)] ) - Disabled / readonly state management - Overlay lifecycle for the dropdown (open/close) - Focus management and focus trapping in the dropdown - Opening the dropdown on click, Enter, Space, ArrowDown, ArrowUp - SiFormItemControl integration

Use SiSelectDropdownDirective to mark the dropdown template in your component, and call open , close , updateValue from your component logic.

Example:

@Component({
  selector: 'app-my-select',
  hostDirectives: [{
    directive: SiCustomSelectDirective,
    inputs: ['disabled', 'readonly', 'value'],
    outputs: ['valueChange']
  }],
  template: `
    <si-select-combobox>
      {{ select.value() }}
    </si-select-combobox>
    <ng-template si-select-dropdown contentType="listbox">
      <button (click)="select.updateValue('new'); select.close()">Pick</button>
    </ng-template>
  `
})
export class MySelectComponent {
  readonly select = inject(SiCustomSelectDirective);
}

Input Properties¶

Output Properties¶

Attributes and Methods¶

Types Documentation¶

<ng-template si-select-dropdown contentType="listbox">
  <!-- custom dropdown content -->
</ng-template>

labelWidth="100px"

labelWidth="100px".

Except where otherwise noted, content on this site is licensed under MIT License.