@talenra/components documentation
  1. Components
  2. OptionComponent

File

select/src/option/option.component.ts

Description

Option represents a single option in the context of a Select. 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 Select's dropdown list.

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>

Import

Example :
import { OptionComponent } from '@talenra/components/select';

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

See FormFieldComponent See SelectComponent

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-option
imports IconComponent TooltipDirective
styleUrls ./option.component.scss
templateUrl ./option.component.html

Index

Inputs

Inputs

icon
Type : string
Default value : ''

The icon to be displayed beside the label.

See @talenra/icons for a list of available icons.
terminated
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Determines whether the option is terminated (expired).

Terminated options are never displayed to users in the options list and thus cannot be picked by users. The only purpose of terminated options is to provide a label we can display to the user in case the Select's value is prefilled with the terminated value.

Typical use case: Legacy support for a value that has been removed (e.g. expired values).

Example :
<talenra-option label="This option has expired" terminated />

See SelectComponent
value
Type : any
Default value : undefined

The option's value. Might differ from the label shown to the user.

results matching ""

    No results matching ""