glint-select-field

Field with dropdown to select 1 value from a number of options. Options can be filtered by typing in a search field.

<glint-select-field label="type" description="Pick one"
                    [options]="['Primary', 'Registry', 'History']"
                    [nullable]="false"/>

• [options]: An array of options to choose from.
• [nullable] (default=true): If false, the first option will be selected by default and the field cannot be emptied.

Different representation

<glint-select-field label="type" description="Pick one"
                    [options]="typeOptions"
                    [textValue]="toName">
  <ng-template let-option>
    <div>{{ option.name }}</div>
    <div class="glint-text-mute">{{option.description}}</div>
  </ng-template>
</glint-select-field>

• [textValue]: Function that converts an option to a string. This is used to display the options in the input field and filter options when typing.
• <ng-template>: Template used to render options in the dropdown.

Add option

It is possible to allow the user to create a new option from the text they entered in the search field.

<glint-select-field label="type" description="Pick one"
                    [options]="typeOptions"
                    [textValue]="toName"
                    [createNew]="createNew"
                    addMessage="New Type"/>

• [createNew]: Function that takes { name: string } and return a new option instance.
• [addMessage]: Define the message used to suggest creating a new option.