v17

Select

A component that allows the user to select one item from a list of options that can be opened and closed.

import { Component } from '@angular/core';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-basic-select-example',
  standalone: true,
  imports: [
    HeadwindSelectComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindOptionComponent,
  ],
  template: `
    <headwind-select
      #select
      [(value)]="value"
      [class]="select.opened ? 'border-rose-500 outline outline-1 outline-rose-500' : 'border-zinc-300'"
      class="inline-flex h-10 w-full max-w-[200px] cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3 focus:border-rose-500 focus:outline focus:outline-1 focus:outline-rose-500"
    >
      <div [class.text-zinc-400]="!value" class="text-sm">
        {{ value ? value : 'Select Option' }}
      </div>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>

      <ng-template headwindOptionsOverlay>
        <headwind-options-overlay [@fadeIn] class="block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl">
          @for (option of options; track option) {
            <headwind-option
              #headwindOption
              [class.text-rose-500]="headwindOption.selected"
              [class.bg-rose-50]="headwindOption.focused"
              [value]="option"
              class="block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50"
            >
              {{ option }}
            </headwind-option>
          }
        </headwind-options-overlay>
      </ng-template>
    </headwind-select>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-options-overlay::-webkit-scrollbar-track {
          @apply my-2;
        }
      }
    `,
  ],
  animations: [
    trigger('fadeIn', [
      state(
        'void',
        style({
          opacity: 0,
        }),
      ),
      transition(
        'void => *',
        animate(
          '.1s',
          style({
            opacity: 1,
          }),
        ),
      ),
      transition('* => void', animate('.1s')),
    ]),
  ],
})
export class BasicSelectExampleComponent {
  value = '';

  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

Select Classes

Basic Classes

Each component used to implement Select has the same class name as its name. You can set styles using the class name as a selector in a style file.

import { Component } from '@angular/core';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-select-classes-example',
  standalone: true,
  imports: [
    HeadwindSelectComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindOptionComponent,
  ],
  template: `
    <headwind-select #select>
      <div [class.text-zinc-400]="!select.value" class="text-sm">
        {{ select.value ? select.value : 'Select Option' }}
      </div>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>

      <ng-template headwindOptionsOverlay>
        <headwind-options-overlay>
          @for (option of options; track option) {
            <headwind-option [value]="option">
              {{ option }}
            </headwind-option>
          }
        </headwind-options-overlay>
      </ng-template>
    </headwind-select>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-select {
          @apply inline-flex h-10 w-full max-w-[200px] cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3;
        }

        .headwind-options-overlay {
          @apply block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl;
        }

        .headwind-option {
          @apply block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50;
        }
      }
    `,
  ],
})
export class SelectClassesExampleComponent {
  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

Focused Class

Each <headwind-option> uses the internal property of the overlay component to give the effect of being focused. When <headwind-option> is brought to the focused state by the overlay component, the .headwind-focused class is added.

import { Component } from '@angular/core';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-select-focused-class-example',
  standalone: true,
  imports: [
    HeadwindSelectComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindOptionComponent,
  ],
  template: `
    <headwind-select #select>
      <div [class.text-zinc-400]="!select.value" class="text-sm">
        {{ select.value ? select.value : 'Select Option' }}
      </div>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>

      <ng-template headwindOptionsOverlay>
        <headwind-options-overlay>
          @for (option of options; track option) {
            <headwind-option [value]="option">
              {{ option }}
            </headwind-option>
          }
        </headwind-options-overlay>
      </ng-template>
    </headwind-select>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-select {
          @apply inline-flex h-10 w-full max-w-[200px] cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3;
        }

        .headwind-options-overlay {
          @apply block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl;
        }

        .headwind-option {
          @apply block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50;

          &.headwind-focused {
            @apply bg-rose-50;
          }
        }
      }
    `,
  ],
})
export class SelectFocusedClassExampleComponent {
  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

Selected Class

When a option is selected, the <headwind-option> component has the class .headwind-selected.

import { Component } from '@angular/core';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-select-selected-class-example',
  standalone: true,
  imports: [
    HeadwindSelectComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindOptionComponent,
  ],
  template: `
    <headwind-select #select>
      <div [class.text-zinc-400]="!select.value" class="text-sm">
        {{ select.value ? select.value : 'Select Option' }}
      </div>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>

      <ng-template headwindOptionsOverlay>
        <headwind-options-overlay>
          @for (option of options; track option) {
            <headwind-option [value]="option">
              {{ option }}
            </headwind-option>
          }
        </headwind-options-overlay>
      </ng-template>
    </headwind-select>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-select {
          @apply inline-flex h-10 w-full max-w-[200px] cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3;
        }

        .headwind-options-overlay {
          @apply block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl;
        }

        .headwind-option {
          @apply block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50;

          &.headwind-selected {
            @apply text-rose-500;
          }

          &.headwind-focused {
            @apply bg-rose-50;
          }
        }
      }
    `,
  ],
})
export class SelectSelectedClassExampleComponent {
  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

Value

Select can bind value to property using value input and valueChange output.

import { Component } from '@angular/core';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-select-value-example',
  standalone: true,
  imports: [
    HeadwindOptionComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindSelectComponent,
  ],
  template: `
    <headwind-select
      [(value)]="value"
      class="inline-flex h-10 w-full max-w-[200px] cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3"
    >
      <div [class.text-zinc-400]="!value" class="text-sm">
        {{ value ? value : 'Select Option' }}
      </div>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>

      <ng-template headwindOptionsOverlay>
        <headwind-options-overlay class="block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl">
          @for (option of options; track option) {
            <headwind-option
              #headwindOption
              [class.text-rose-500]="headwindOption.selected"
              [class.bg-rose-50]="headwindOption.focused"
              [value]="option"
              class="block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50"
            >
              {{ option }}
            </headwind-option>
          }
        </headwind-options-overlay>
      </ng-template>
    </headwind-select>
  `,
})
export class SelectValueExampleComponent {
  value = 'Evelynn Hobbs';

  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

NgModel, FormControl

The <headwind-select> component can bind value using NgModel or FormControl.

import { Component } from '@angular/core';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-select-model-binding-example',
  standalone: true,
  imports: [
    HeadwindOptionComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindSelectComponent,
    FormsModule,
    ReactiveFormsModule,
  ],
  template: `
    <div class="w-full max-w-[250px] space-y-2 rounded-xl bg-white p-8 shadow-xl">
      <headwind-select
        [(ngModel)]="value"
        class="flex h-10 w-full cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3"
      >
        <div [class.text-zinc-400]="!value" class="text-sm">
          {{ value ? value : 'Select Option' }}
        </div>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="h-4 w-4"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
        </svg>

        <ng-template headwindOptionsOverlay>
          <headwind-options-overlay class="block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl">
            @for (option of options; track option) {
              <headwind-option
                #headwindOption
                [class.text-rose-500]="headwindOption.selected"
                [class.bg-rose-50]="headwindOption.focused"
                [value]="option"
                class="block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50"
              >
                {{ option }}
              </headwind-option>
            }
          </headwind-options-overlay>
        </ng-template>
      </headwind-select>

      <headwind-select
        [formControl]="formControl"
        class="flex h-10 w-full cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3"
      >
        <div [class.text-zinc-400]="!formControl.value" class="text-sm">
          {{ formControl.value ? formControl.value : 'Select Option' }}
        </div>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="h-4 w-4"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
        </svg>

        <ng-template headwindOptionsOverlay>
          <headwind-options-overlay class="block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl">
            @for (option of options; track option) {
              <headwind-option
                #headwindOption
                [class.text-rose-500]="headwindOption.selected"
                [class.bg-rose-50]="headwindOption.focused"
                [value]="option"
                class="block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50"
              >
                {{ option }}
              </headwind-option>
            }
          </headwind-options-overlay>
        </ng-template>
      </headwind-select>
    </div>
  `,
})
export class SelectModelBindingExampleComponent {
  value = '';
  formControl = new FormControl('');

  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

Disabled State

Setting the disabled attribute will disable the Select. Styling for the disabled state uses the [disabled] CSS selector instead of :disabled.

import { Component } from '@angular/core';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-select-disabled-state-example',
  standalone: true,
  imports: [
    HeadwindOptionComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindSelectComponent,
  ],
  template: `
    <headwind-select
      [(value)]="value"
      disabled
      class="inline-flex h-10 w-full max-w-[200px] cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3"
    >
      <div [class.text-zinc-400]="!value" class="placeholder text-sm">
        {{ value ? value : 'Select Option' }}
      </div>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>

      <ng-template headwindOptionsOverlay>
        <headwind-options-overlay class="block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl">
          @for (option of options; track option) {
            <headwind-option
              #headwindOption
              [class.text-rose-500]="headwindOption.selected"
              [class.bg-rose-50]="headwindOption.focused"
              [value]="option"
              class="block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50"
            >
              {{ option }}
            </headwind-option>
          }
        </headwind-options-overlay>
      </ng-template>
    </headwind-select>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-select[disabled] {
          @apply cursor-not-allowed bg-zinc-100;

          .placeholder {
            @apply text-zinc-400;
          }

          svg {
            @apply stroke-zinc-400;
          }
        }
      }
    `,
  ],
})
export class SelectDisabledStateExampleComponent {
  value = 'Evelynn Hobbs';

  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

Multiple

You can set the multiple attribute on <headwind-select> to enable selection of multiple options. The value must be in the form of an array, and if a non-array value is provided, the value is ignored and a new array is created.

Selected...
Nothing Selected
import { Component } from '@angular/core';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-select-multiple-example',
  standalone: true,
  imports: [
    HeadwindOptionComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindSelectComponent,
  ],
  template: `
    <div class="w-full max-w-[250px] space-y-4 rounded-xl bg-white p-8 shadow-xl">
      <div class="space-y-2">
        <div class="text-lg font-semibold">Selected...</div>

        @if (value.length > 0) {
          <ul class="list-inside list-disc space-y-1 text-sm">
            @for (item of value; track item) {
              <li>
                {{ item }}
              </li>
            }
          </ul>
        } @else {
          <div class="text-sm text-zinc-400">Nothing Selected</div>
        }
      </div>

      <headwind-select
        [(value)]="value"
        multiple
        class="inline-flex h-10 w-full cursor-pointer select-none items-center justify-between space-x-2 rounded-lg border bg-white px-3"
      >
        <div [class.text-zinc-400]="value.length === 0" class="truncate text-sm">
          {{ value.length > 0 ? value : 'Select Option' }}
        </div>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="h-4 w-4"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
        </svg>

        <ng-template headwindOptionsOverlay>
          <headwind-options-overlay class="block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl">
            @for (option of options; track option) {
              <headwind-option
                #headwindOption
                [class.text-rose-500]="headwindOption.selected"
                [class.bg-rose-50]="headwindOption.focused"
                [value]="option"
                class="block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50"
              >
                {{ option }}
              </headwind-option>
            }
          </headwind-options-overlay>
        </ng-template>
      </headwind-select>
    </div>
  `,
})
export class SelectMultipleExampleComponent {
  value: string[] = [];

  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

Animation

Bind an animation trigger to <headwind-options-overlay> to play animation when options opened state is toggled.

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import {
  HeadwindOptionComponent,
  HeadwindOptionsOverlayComponent,
  HeadwindOptionsOverlayDirective,
  HeadwindSelectComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-select-animation-example',
  standalone: true,
  imports: [
    HeadwindOptionComponent,
    HeadwindOptionsOverlayComponent,
    HeadwindOptionsOverlayDirective,
    HeadwindSelectComponent,
  ],
  template: `
    <headwind-select
      #select
      class="inline-flex h-10 w-full max-w-[200px] cursor-pointer select-none items-center justify-between rounded-lg border bg-white px-3"
    >
      <div [class.text-zinc-400]="!select.value" class="text-sm">
        {{ select.value ? select.value : 'Select Option' }}
      </div>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>

      <ng-template headwindOptionsOverlay>
        <headwind-options-overlay [@fadeIn] class="block max-h-[200px] overflow-auto rounded-md bg-white p-2 shadow-xl">
          @for (option of options; track option) {
            <headwind-option
              #headwindOption
              [class.text-rose-500]="headwindOption.selected"
              [class.bg-rose-50]="headwindOption.focused"
              [value]="option"
              class="block cursor-pointer select-none px-3 py-2 text-sm hover:bg-rose-50"
            >
              {{ option }}
            </headwind-option>
          }
        </headwind-options-overlay>
      </ng-template>
    </headwind-select>
  `,
  animations: [
    trigger('fadeIn', [
      state(
        'void',
        style({
          opacity: 0,
        }),
      ),
      transition(
        'void => *',
        animate(
          '.1s',
          style({
            opacity: 1,
          }),
        ),
      ),
      transition('* => void', animate('.1s')),
    ]),
  ],
})
export class SelectAnimationExampleComponent {
  options = [
    'Tori Day',
    'Ishaan Martinez',
    'Alvin Bailey',
    'Opal Morton',
    'Evelynn Hobbs',
    'Leila Pacheco',
    'Fatima Shaw',
    'Alexandria Huynh',
  ];
}

Accessibility

Mouse Interaction

Clicking on &lt;headwind-select&gt; opens the options.<br/> Clicking outside of &lt;headwind-options-overlay&gt; closes the options overlay.<br/> Clicking on &lt;headwind-option&gt; changes the value of Select.

Keyboard Interaction

Command Target Description
Enter, ArrowDown, ArrowUp &lt;headwind-select&gt; Toggle the opened state of options.
ArrowDown &lt;headwind-options-overlay&gt; Focus to the next option.
ArrowUp &lt;headwind-options-overlay&gt; Focus to the previous option.
Enter, Space &lt;headwind-options-overlay&gt; Select focused option.
Escape window Close the opened options.

API

HeadwindSelectComponent

A component that toggles &lt;headwind-options-overlay&gt; and reflects the selected value.

Selector

&lt;headwind-select&gt;

Host Class

.headwind-select

Inputs

Name Description
@Input() set value(value: any) Set the selected value of Select.
@Input() set multiple(value: boolean) Set to select multiple options.
@Input() set disabled(value: boolean) Set the disabled state of Select.

Outputs

Name Description
@Output() valueChange: EventEmitter&lt;any&gt; Emits the changed value of Select.

Properties

Name Description
get opened(): boolean Get the opened state of options.

Methods

Name Description
open() Open the options. If it is already opened, it is ignored.
close() Select the next option. If it is already closed, it is ignored.

HeadwindOptionsOverlayDirective

A directive for the template that wraps &lt;headwind-options-overlay&gt;.

Selector

ng-template[headwindOptionsOverlay]

HeadwindOptionsOverlayComponent

An options overlay component containing multiple &lt;headwind-option&gt;.

Selector

&lt;headwind-options-overlay&gt;

Host Class

.headwind-options-overlay

Outputs

Name Description
@Output() actualDirectionChange: EventEmitter&lt;YDirection&gt; The direction in which the actual options overlay is rendered is emitted every RequestAnimationFrame.

HeadwindOptionComponent

An option component whose value can be reflected in &lt;headwind-select&gt; when selected.

Selector

&lt;headwind-option&gt;

Host Class

.headwind-option<br/> .headwind-selected when option selected. .headwind-focused when option focused.

Inputs

Name Description
@Input() value: any Set the value of option.

Properties

Name Description
get focused(): boolean Focused state of option.
get selected(): boolean Selected state of option.