### File

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

### Description

See demo

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

### Extends

`Select`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: TimePickerSelect, multi: true }`
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
Public isTemplate onChange registerOnChange registerOnTouched setDisabledState writeValue
###### Inputs
id label skeleton theme disabled display helperText id invalid invalidText label skeleton theme
###### Outputs
selected valueChange
###### 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:43

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

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

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

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

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

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

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

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

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

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

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

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

### Outputs

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

`valueChange` | `$event` Type: `EventEmitter`
Inherited from `Select`
Defined in Select:149

### HostBindings

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

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

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

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

### HostListeners

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

### Methods

Public isTemplate
`isTemplate(value)`
Inherited from `Select`
Defined in Select:207
Parameters :
Name | Optional
value | No
Returns : `boolean`

onChange
`onChange(event)`
Inherited from `Select`
Defined in Select:193
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:171
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:178
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:185
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:164
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:214
placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`

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

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

Static selectCount
`selectCount: `number``
Type : `number`
Default value : `0`
Inherited from `Select`
Defined in Select:104
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";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";

    /**
     * [See demo](../../?path=/story/time-picker-select--simple)
     *
     * <example-url>../../iframe.html?id=time-picker-select--simple</example-url>
     */
    @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>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: TimePickerSelect,
    			multi: true
    		}
    	]
    })
    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";
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""