### File

`src/timepicker-select/timepicker-select.component.ts`

### Description

See demo

../../iframe.html?id=time-picker-select--simple

### Extends

`Select`

### Example

### Metadata

selector | `ibm-timepicker-select`

template

    <label *ngIf="!skeleton && label" [attr.for]="id" class="bx--label bx--visually-hidden">{{label}}</label>
    <select
    	#select
    	[attr.id]="id"
    	[disabled]="disabled"
    	(change)="onChange($event)"
    	class="bx--select-input">
    	<ng-content></ng-content>
    </select>
    <ibm-icon-chevron-down16 *ngIf="!skeleton" class="bx--select__arrow"></ibm-icon-chevron-down16>

### Index

###### Properties

- Protected onChangeHandler
- Protected onTouchedHandler
- select
- Static selectCount

###### Methods

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

###### Inputs

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

###### Outputs

- valueChange
- selected

###### HostBindings

- class.bx--select
- class.bx--select--light
- class.bx--skeleton
- class.bx--time-picker__select

###### HostListeners

- blur

### Inputs

`id` | Default value : ``timepicker-select-${TimePickerSelect.selectCount++}``
Defined in src/timepicker-select/timepicker-select.component.ts:39

`label` | Type : `string`
Defined in src/timepicker-select/timepicker-select.component.ts:51

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

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

`disabled` | Set to true to disable component. Default value : `false`
Inherited from `Select`
Defined in Select:121

`display` | `inline` or `default` select displays Type : `"inline" | "default"` Default value : `"default"`
Inherited from `Select`
Defined in Select:101

`helperText` | Optional helper text that appears under the label. Type : `string | TemplateRef<any>`
Inherited from `Select`
Defined in Select:109

`id` | Sets the unique ID. Defaults to `select-${total count of selects instantiated}` Default value : ``select-${Select.selectCount++}``
Inherited from `Select`
Defined in Select:117

`invalid` | Set to `true` for an invalid select component. Default value : `false`
Inherited from `Select`
Defined in Select:129

`invalidText` | Sets the invalid text. Type : `string | TemplateRef<any>`
Inherited from `Select`
Defined in Select:113

`label` | Label for the select. Appears above the input. Type : `string | TemplateRef<any>`
Inherited from `Select`
Defined in Select:105

`skeleton` | Set to true for a loading select. Default value : `false`
Inherited from `Select`
Defined in Select:125

`theme` | `light` or `dark` select theme Type : `"light" | "dark"` Default value : `"dark"`
Inherited from `Select`
Defined in Select:134

### Outputs

`valueChange` | `$event` Type: `EventEmitter<string>`
Defined in src/timepicker-select/timepicker-select.component.ts:59

`selected` | emits the selected options `value` `$event` Type: `EventEmitter`
Inherited from `Select`
Defined in Select:138

### HostBindings

class.bx--select
`class.bx--select: ```
Default value : `true`
Defined in src/timepicker-select/timepicker-select.component.ts:36

class.bx--select--light
`class.bx--select--light: ```
Defined in src/timepicker-select/timepicker-select.component.ts:55

class.bx--skeleton
`class.bx--skeleton: ```
Default value : `this.skeleton`
Defined in src/timepicker-select/timepicker-select.component.ts:53

class.bx--time-picker__select
`class.bx--time-picker__select: ```
Default value : `true`
Defined in src/timepicker-select/timepicker-select.component.ts:37

### HostListeners

blur
`blur()`
Inherited from `Select`
Defined in Select:191
Listens for the host blurring, and notifies the model

### Methods

onChange
`onChange(event)`
Defined in src/timepicker-select/timepicker-select.component.ts:61

Parameters :

Name | Optional
event | No

Returns : `void`

Public isTemplate
`isTemplate(value)`
Inherited from `Select`
Defined in Select:195

Parameters :

Name | Optional
value | No

Returns : `boolean`

onChange
`onChange(event)`
Inherited from `Select`
Defined in Select:182

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)`
Inherited from `Select`
Defined in Select:160

Registers a listener that notifies the model when the control updates

Parameters :

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

Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`
Inherited from `Select`
Defined in Select:167

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)`
Inherited from `Select`
Defined in Select:174

Sets the disabled state through the model

Parameters :

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

Returns : `void`

writeValue
`writeValue(obj: any)`
Inherited from `Select`
Defined in Select:153

Receives a value from the model.

Parameters :

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

Returns : `void`

### Properties

Protected onChangeHandler
`onChangeHandler: ```
Default value : `(_: any) => { }`
Inherited from `Select`
Defined in Select:202
placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`

Protected onTouchedHandler
`onTouchedHandler: ```
Default value : `() => { }`
Inherited from `Select`
Defined in Select:203

select
`select: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('select')`
Inherited from `Select`
Defined in Select:140

Static selectCount
`selectCount: `number``
Type : `number`
Default value : `0`
Inherited from `Select`
Defined in Select:96
Tracks the total number of selects instantiated. Used to generate unique IDs

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	HostBinding,
    	TemplateRef
    } from "@angular/core";
    import { Select } from "../select/select.component";

    /**
     * [See demo](../../?path=/story/time-picker-select--simple)
     *
     * <example-url>../../iframe.html?id=time-picker-select--simple</example-url>
     *
     * @export
     * @class TimePickerSelect
     * @extends {Select}
     */
    @Component({
    	selector: "ibm-timepicker-select",
    	template: `
    			<label *ngIf="!skeleton && label" [attr.for]="id" class="bx--label bx--visually-hidden">{{label}}</label>
    			<select
    				#select
    				[attr.id]="id"
    				[disabled]="disabled"
    				(change)="onChange($event)"
    				class="bx--select-input">
    				<ng-content></ng-content>
    			</select>
    			<ibm-icon-chevron-down16 *ngIf="!skeleton" class="bx--select__arrow"></ibm-icon-chevron-down16>
    	`
    })
    export class TimePickerSelect extends Select {
    	@HostBinding("class.bx--select") timeSelect = true;
    	@HostBinding("class.bx--time-picker__select") timePickerSelect = true;

    	@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;

    	/**
    	 * Set to true for a loading select.
    	 */
    	@Input() skeleton = false;

    	/**
    	 * `light` or `dark` select theme
    	 */
    	@Input() theme: "light" | "dark" = "dark";

    	@Input() label: string;

    	@HostBinding("class.bx--skeleton") timePickerSelectSkeleton = this.skeleton;

    	@HostBinding("class.bx--select--light") get timePickerSelectLight() {
    		return this.theme === "light";
    	}

    	@Output() valueChange: EventEmitter<string> = new EventEmitter();

    	onChange(event) {
    		this.valueChange.emit(event.target.value);
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""