File

select/src/select/select.component.ts

Description

Select is a form control for selecting a value from a set of options, similar to the native <select> element. It is typically used in a form context (in combination with FormField). Use Option as childr of Select to provide options. Each Option has a value property that can be used to set the value that will be selected if the user chooses this option. The content of the Option is displayed in the option list.

Appearance: Kind "ghost" offers an alternative appearance and slightly different behavior which is typically applied when Select is used outside a classic form context, e.g. in a toolbar.

Multiselect: Select supports selection of multiple options. Use the allowMultiple input property to activate this optional feature.

Filtering Options: Use the useFilter input property to show an input field to filter options.

Reactive form

Example :

// Component class
protected sampleForm: FormGroup = new FormGroup({
  size: new FormControl('m'),
});

Example :

<!-- Component template -->
<form [formGroup]="sampleForm">
  <talenra-form-field label="Size">
    <talenra-select formControlName="size">
      <talenra-option value="s" label="S" />
      <talenra-option value="m" label="M" />
      <talenra-option value="l" label="L" />
    </talenra-select>
  </talenra-form-field>
</form>

Reactive form (Multiselect with multiple items)

Example :

// Component class
protected sampleForm: FormGroup = new FormGroup({
  sizes: new FormControl(['s', 'm']),
});

Example :

<!-- Component template -->
<form [formGroup]="sampleForm">
  <talenra-form-field label="Size">
    <talenra-select formControlName="sizes" allowMultiple>
      <talenra-option value="s" label="S" />
      <talenra-option value="m" label="M" />
      <talenra-option value="l" label="L" />
      <talenra-option value="xl" label="XL" />
    </talenra-select>
  </talenra-form-field>
</form>

Template driven form

Example :

// Import `FormsModule` in the declaring module
import { FormsModule } from '@angular/forms';
@NgModule({
 // ...
 imports: [FormsModule],
})

Example :

// Component class
protected size = 'm';

Example :

<!-- Component template -->
<form #templateDrivenForm="ngForm">
  <talenra-form-field label="Size">
    <talenra-select name="size" [(ngModel)]="size">
      <talenra-option value="s" label="S" />
      <talenra-option value="m" label="M" />
      <talenra-option value="l" label="L" />
    </talenra-select>
  </talenra-form-field>
</form>

Formless

Example :

// Component class
protected size = 'm';

Example :

<!-- Component template -->
<talenra-form-field label="Size">
  <talenra-select [(ngModel)]="size">
    <talenra-option value="s" label="S" />
    <talenra-option value="m" label="M" />
    <talenra-option value="l" label="L" />
  </talenra-select>
</talenra-form-field>

Handling terminated values

Select supports terminated options (cmp. Option component's terminated property). Terminated options are always hidden in the option list. If a terminated option is pre-selected (Select's value equals the terminated option's value) and the enclosing Form Field's handleTerminatedValues property is set to true, Select is set to readonly state. Further, a delete button is displayed, which allows the user to reset the Select's value.

Example :

<!-- Component template -->
<form [formGroup]="sampleForm">
  <talenra-form-field label="Size" handleTerminatedValues>
    <talenra-select formControlName="size">
      <talenra-option value="s" label="S" />
      <talenra-option value="m" label="M (sold out)" terminated />
      <talenra-option value="l" label="L" />
    </talenra-select>
  </talenra-form-field>
</form>

Import

Example :

import { SelectComponent } from '@talenra/components/select';

../../../#/select

See FormFieldComponent See OptionComponent

Extends

FormFieldControlBaseComponent

Implements

OnInit OnDestroy AfterViewInit ControlValueAccessor FormFieldControl

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
host	`{ }`
providers	`SelectComponent` `)`
selector	`talenra-select`
imports	`IconComponent` `ChipComponent` `CdkOverlayOrigin` `CdkConnectedOverlay` `OptionListComponent`
styleUrls	`./select.component.scss`
templateUrl	`./select.component.html`

Index

Properties

Public Readonly label

Inputs

disabled

Type : boolean

Determines whether the control is disabled/enabled.

value

Type : any

The control's current value.

allowMultiple

Type : boolean, unknown

Default value : false, { transform: booleanAttribute }

Allow to select multiple values.

Example :

<talenra-select ... allowMultiple>...</talenra-select>

kind

Type : TSelectKind

Default value : SelectKind.Primary

Determines the Select's style. Kind "ghost" is typically used when Select is used outside a classic form context, e.g. in a toolbar.

Example :

<talenra-select formControlName="role" kind="ghost">
  <talenra-option value="reader" label="Reader" />
  <talenra-option value="editor" label="Editor" />
</talenra-select>

noMatchMessage

Type : string

Default value : 'Filter query does not match any option'

Message displayed to the user if the filter query does not match any option.

Example :

<talenra-form-field label="Animal">
  <talenra-select formControlName="animal" useFilter noMatchMessage="No option matches your query.">
    <talenra-option value="alpaca" label="Alpaca" />
    <talenra-option value="donkey" label="Donkey" />
    <!-- a bunch of options -->
  </talenra-select>
</talenra-form-field>

noOptionsMessage

Type : string

Default value : 'No entries available'

Message displayed to the user if Select contains no options (e.g. while loading, due to backend issues etc.).

Example :

<talenra-form-field label="Animal">
  <talenra-select formControlName="animal" noOptionsMessage="No animals available.">
  </talenra-select>
</talenra-form-field>

placeholder

Type : string

Default value : ''

Placeholder displayed if Select's value is not set. Has no effect if Select's kind is not "ghost".

Example :

// Component class
role: FormControl = new FormControl();

Example :

<!-- Component template -->
<talenra-select formControlName="role" kind="ghost" placeholder="Choose user role…">
  <talenra-option value="reader" label="Reader" />
  <talenra-option value="editor" label="Editor" />
</talenra-select>

useFilter

Type : boolean, unknown

Default value : false, { transform: booleanAttribute }

Shows a input field to filter options if true and option list contains at least two items.

Example :

<talenra-select ... useFilter>...</talenra-select>

Outputs

selectionChange

Type : SelectChange

Emitted when the selected value has been changed by the user. Emitted (with [] or null) when the clear button (×) is clicked. Emitted when the clear button (×) in a Chips component is clicked.

Example :

// Component class
import { SelectChange } from '@talenra/components/select';
public selectionChange(change: SelectChange): void {
  console.log(`Select (id: ${change.source.id}) has value ${change.value}`);
}

Example :

<!-- Component template -->
<talenra-form-field label="Size">
  <talenra-select [(ngModel)]="formless.size" (selectionChange)="selectionChange($event)">
    <talenra-option value="s" label="S" />
    <talenra-option value="m" label="M" />
    <talenra-option value="l" label="L" />
  </talenra-select>
</talenra-form-field>

See SelectChange

Properties

Public Readonly label

Type : unknown

Default value : signal<string>('')

Label displayed to the user. Derived from the currently selected option.

Accessors

disabled

getdisabled()

Determines whether the control is disabled/enabled.

Returns : boolean

setdisabled(value: boolean)

Set the control's disabled state

Parameters :

Name	Type	Optional
value	`boolean`	No

Returns : void

value

getvalue()

The control's current value.

setvalue(value: any)

Set the control's current value.

Parameters :

Name	Type	Optional
value	`any`	No

Returns : void

showPanel

setshowPanel(value: boolean)

Determines whether the option list is displayed.

Parameters :

Name	Type	Optional
value	`boolean`	No

Returns : void

File

Description

Reactive form

Reactive form (Multiselect with multiple items)

Template driven form

Formless

Handling terminated values

Import

Extends

Implements

Metadata

Index

Properties

Inputs

Outputs

Accessors

Inputs

Outputs

Properties

Accessors

results matching ""

No results matching ""