Switch Module Name: SwitchModule

Module Name: SwitchModule

The Switch component allow's user to execute an action immediately.

Showcase
Basic

Returned Value: false
<tl-switch [label]="'Option 1'"></tl-switch>
<tl-switch [label]="'Option 2'"></tl-switch>
<tl-switch [label]="'Option 3'"></tl-switch>
Pre Selected Value
<tl-switch [label]="'Option 1'"></tl-switch>
<tl-switch [checked]="true" [label]="'Option 2'"></tl-switch>
<tl-switch [label]="'Option 3'"></tl-switch>
Custom Color Checkbox
<tl-switch [label]="'Option 1'" [color]="'primary'" [checked]="true"></tl-switch>
<tl-switch [label]="'Option 2'" [color]="'warning'" [checked]="true"></tl-switch>
<tl-switch [label]="'Option 3'" [color]="'danger'" [checked]="true"></tl-switch>
<tl-switch [label]="'Option 4'" [color]="'success'" [checked]="true"></tl-switch>
<tl-switch [label]="'Option 5'" [color]="'information'" [checked]="true"></tl-switch>
Properties
NameTypeDefaultDescriptionOptions
checkedbooleanfalseDefine initialization of switch ( checked or not ). true | false
colorstringbasicChanges the default color of the button. basic | primary | success | information | warning | danger | light | dark
labelstringnullThe text which will display front of switch. any text
labelSizestring100pxWidth of label text. px | % | em
Events

All Angular Supported Events can be used on this component.

NameParametersDescription
focus
$event : Native event
Dispatched when the switch receive focus.
toogle
boolean : Boolean value
Dispatched when the switch is checked.