### File

`src/select/select.component.ts`

### Description

`ibm-select` provides a styled `select` component.

See demo

Example:

     * <ibm-select [(ngModel)]="model">
     *     <option value="default" disabled selected hidden>Choose an option</option>
     *     <option value="option1">Option 1</option>
     *    <option value="option2">Option 2</option>
     *     <option value="option3">Option 3</option>
     * </ibm-select>
     *

../../iframe.html?id=select--basic

### Implements

`ControlValueAccessor`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: Select, multi: true }`
selector | `ibm-select`
styles | `[data-invalid] ~ .bx--select__arrow { bottom: 2.25rem; }`

template

    <div class="bx--form-item">
    	<div
    		[ngClass]="{
    			'bx--select--inline': display === 'inline',
    			'bx--select--light': theme === 'light',
    			'bx--skeleton': skeleton
    		}"
    		class="bx--select"
    		style="width: 100%">
    		<label *ngIf="skeleton && label" [for]="id" class="bx--label bx--skeleton"></label>
    		<label *ngIf="!skeleton && label" [for]="id" class="bx--label">
    			<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    			<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    		</label>
    		<div *ngIf="helperText" class="bx--form__helper-text">
    			<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
    			<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    		</div>
    		<div class="bx--select-input__wrapper" [attr.data-invalid]="(invalid ? true : null)">
    			<select
    				#select
    				[attr.id]="id"
    				[disabled]="disabled"
    				(change)="onChange($event)"
    				class="bx--select-input">
    				<ng-content></ng-content>
    			</select>
    			<ibm-icon-warning-filled16
    				*ngIf="!skeleton && invalid"
    				class="bx--select__invalid-icon"
    				style="display: inherit;">
    			</ibm-icon-warning-filled16>
    			<ibm-icon-chevron-down16 *ngIf="!skeleton" class="bx--select__arrow" style="display: inherit;"></ibm-icon-chevron-down16>
    		</div>
    		<div *ngIf="invalid" class="bx--form-requirement">
    			<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
    			<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    		</div>
    	</div>
    </div>

### Index

###### Properties

- Protected onChangeHandler
- Protected onTouchedHandler
- select
- Static selectCount

###### Methods

- Public isTemplate
- onChange
- registerOnChange
- registerOnTouched
- setDisabledState
- writeValue

###### Inputs

- disabled
- display
- helperText
- id
- invalid
- invalidText
- label
- skeleton
- theme

###### Outputs

- selected

###### HostListeners

- blur

###### Accessors

- value

### Inputs

`disabled` | Set to true to disable component. Default value : `false`
Defined in src/select/select.component.ts:117

`display` | `inline` or `default` select displays Type : `"inline" | "default"` Default value : `"default"`
Defined in src/select/select.component.ts:97

`helperText` | Optional helper text that appears under the label. Type : `string | TemplateRef<any>`
Defined in src/select/select.component.ts:105

`id` | Sets the unique ID. Defaults to `select-${total count of selects instantiated}` Default value : ``select-${Select.selectCount++}``
Defined in src/select/select.component.ts:113

`invalid` | Set to `true` for an invalid select component. Default value : `false`
Defined in src/select/select.component.ts:125

`invalidText` | Sets the invalid text. Type : `string | TemplateRef<any>`
Defined in src/select/select.component.ts:109

`label` | Label for the select. Appears above the input. Type : `string | TemplateRef<any>`
Defined in src/select/select.component.ts:101

`skeleton` | Set to true for a loading select. Default value : `false`
Defined in src/select/select.component.ts:121

`theme` | `light` or `dark` select theme Type : `"light" | "dark"` Default value : `"dark"`
Defined in src/select/select.component.ts:130

### Outputs

`selected` | emits the selected options `value` `$event` Type: `EventEmitter`
Defined in src/select/select.component.ts:134

### HostListeners

blur
`blur()`
Defined in src/select/select.component.ts:187
Listens for the host blurring, and notifies the model

### Methods

Public isTemplate
`isTemplate(value)`
Defined in src/select/select.component.ts:191

Parameters :

Name | Optional
value | No

Returns : `boolean`

onChange
`onChange(event)`
Defined in src/select/select.component.ts:178

Handles the change event from the `select`. Sends events to the change handler and emits a `selected` event.

Parameters :

Name | Optional
event | No

Returns : `void`

registerOnChange
`registerOnChange(fn: any)`
Defined in src/select/select.component.ts:156

Registers a listener that notifies the model when the control updates

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`
Defined in src/select/select.component.ts:163

Registers a listener that notifies the model when the control is blurred

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

setDisabledState
`setDisabledState(isDisabled: boolean)`
Defined in src/select/select.component.ts:170

Sets the disabled state through the model

Parameters :

Name | Type | Optional
isDisabled | `boolean` | No

Returns : `void`

writeValue
`writeValue(obj: any)`
Defined in src/select/select.component.ts:149

Receives a value from the model.

Parameters :

Name | Type | Optional
obj | `any` | No

Returns : `void`

### Properties

Protected onChangeHandler
`onChangeHandler: ```
Default value : `(_: any) => { }`
Defined in src/select/select.component.ts:198
placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`

Protected onTouchedHandler
`onTouchedHandler: ```
Default value : `() => { }`
Defined in src/select/select.component.ts:199

select
`select: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('select')`
Defined in src/select/select.component.ts:136

Static selectCount
`selectCount: `number``
Type : `number`
Default value : `0`
Defined in src/select/select.component.ts:92
Tracks the total number of selects instantiated. Used to generate unique IDs

### Accessors

value
get `value()`
Defined in src/select/select.component.ts:138
set `value(v)`
Defined in src/select/select.component.ts:142

Parameters :

Name | Optional
v | No

Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	ViewChild,
    	ElementRef,
    	HostListener,
    	EventEmitter,
    	TemplateRef
    } from "@angular/core";
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

    /**
     * `ibm-select` provides a styled `select` component.
     *
     * [See demo](../../?path=/story/select--basic)
     *
     * Example:
     *
     * ```
     * <ibm-select [(ngModel)]="model">
     * 	<option value="default" disabled selected hidden>Choose an option</option>
     * 	<option value="option1">Option 1</option>
     *	<option value="option2">Option 2</option>
     * 	<option value="option3">Option 3</option>
     * </ibm-select>
     *	```
     *
     * <example-url>../../iframe.html?id=select--basic</example-url>
     */
    @Component({
    	selector: "ibm-select",
    	template: `
    		<div class="bx--form-item">
    			<div
    				[ngClass]="{
    					'bx--select--inline': display === 'inline',
    					'bx--select--light': theme === 'light',
    					'bx--skeleton': skeleton
    				}"
    				class="bx--select"
    				style="width: 100%">
    				<label *ngIf="skeleton && label" [for]="id" class="bx--label bx--skeleton"></label>
    				<label *ngIf="!skeleton && label" [for]="id" class="bx--label">
    					<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    					<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    				</label>
    				<div *ngIf="helperText" class="bx--form__helper-text">
    					<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
    					<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    				</div>
    				<div class="bx--select-input__wrapper" [attr.data-invalid]="(invalid ? true : null)">
    					<select
    						#select
    						[attr.id]="id"
    						[disabled]="disabled"
    						(change)="onChange($event)"
    						class="bx--select-input">
    						<ng-content></ng-content>
    					</select>
    					<ibm-icon-warning-filled16
    						*ngIf="!skeleton && invalid"
    						class="bx--select__invalid-icon"
    						style="display: inherit;">
    					</ibm-icon-warning-filled16>
    					<ibm-icon-chevron-down16 *ngIf="!skeleton" class="bx--select__arrow" style="display: inherit;"></ibm-icon-chevron-down16>
    				</div>
    				<div *ngIf="invalid" class="bx--form-requirement">
    					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
    					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    				</div>
    			</div>
    		</div>
    	`,
    	styles: [`
    		[data-invalid] ~ .bx--select__arrow {
    			bottom: 2.25rem;
    		}
    	`],
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: Select,
    			multi: true
    		}
    	]
    })
    export class Select implements ControlValueAccessor {
    	/**
    	 * Tracks the total number of selects instantiated. Used to generate unique IDs
    	 */
    	static selectCount = 0;

    	/**
    	 * `inline` or `default` select displays
    	 */
    	@Input() display: "inline" | "default" = "default";
    	/**
    	 * Label for the select. Appears above the input.
    	 */
    	@Input() label: string | TemplateRef<any>;
    	/**
    	 * Optional helper text that appears under the label.
    	 */
    	@Input() helperText: string | TemplateRef<any>;
    	/**
    	 * Sets the invalid text.
    	 */
    	@Input() invalidText: string | TemplateRef<any>;
    	/**
    	 * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`
    	 */
    	@Input() id = `select-${Select.selectCount++}`;
    	/**
    	 * Set to true to disable component.
    	 */
    	@Input() disabled = false;
    	/**
    	 * Set to true for a loading select.
    	 */
    	@Input() skeleton = false;
    	/**
    	 * Set to `true` for an invalid select component.
    	 */
    	@Input() invalid = false;

    	/**
    	 * `light` or `dark` select theme
    	 */
    	@Input() theme: "light" | "dark" = "dark";
    	/**
    	 * emits the selected options `value`
    	 */
    	@Output() selected = new EventEmitter();

    	@ViewChild("select") select: ElementRef;

    	get value() {
    		return this.select.nativeElement.value;
    	}

    	set value(v) {
    		this.select.nativeElement.value = v;
    	}

    	/**
    	 * Receives a value from the model.
    	 */
    	writeValue(obj: any) {
    		this.value = obj;
    	}

    	/**
    	 * Registers a listener that notifies the model when the control updates
    	 */
    	registerOnChange(fn: any) {
    		this.onChangeHandler = fn;
    	}

    	/**
    	 * Registers a listener that notifies the model when the control is blurred
    	 */
    	registerOnTouched(fn: any) {
    		this.onTouchedHandler = fn;
    	}

    	/**
    	 * Sets the disabled state through the model
    	 */
    	setDisabledState(isDisabled: boolean) {
    		this.disabled = isDisabled;
    	}

    	/**
    	 * Handles the change event from the `select`.
    	 * Sends events to the change handler and emits a `selected` event.
    	 */
    	onChange(event) {
    		this.onChangeHandler(event.target.value);
    		this.selected.emit(event.target.value);
    	}

    	/**
    	 * Listens for the host blurring, and notifies the model
    	 */
    	@HostListener("blur")
    	blur() {
    		this.onTouchedHandler();
    	}

    	public isTemplate(value) {
    		return value instanceof TemplateRef;
    	}

    	/**
    	 * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`
    	 */
    	protected onChangeHandler = (_: any) => { };
    	protected onTouchedHandler = () => { };
    }

    		[data-invalid] ~ .bx--select__arrow {
    			bottom: 2.25rem;
    		}

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""