@natec/mef-dev-ui-kit documentation
  1. Components
  2. MefDevSwitchComponent

File

src/lib/pg-components/switch/switch.component.ts

Description

Example of usage: https://mef.dev/ui_kit_demo/view/controls/switch

Implements

OnInit ControlValueAccessor

Metadata

encapsulation ViewEncapsulation.None
providers MefDevSwitchComponent.switchValueAccessor()
selector mefdev-switch
templateUrl ./switch.component.html

Index

Properties
Methods
Inputs
Outputs
HostListeners
Accessors

Inputs

Color
Type : string

Sets the color of the switch.

Usage example:

<mefdev-switch [Color]="'primary'"></mefdev-switch>
Disabled
Type : boolean

Sets the disabled state of the switch.

Usage example:

<mefdev-switch [Disabled]="true"></mefdev-switch>
Size
Type : string

Sets the size of the switch.

Usage example:

<mefdev-switch [Size]="'small'"></mefdev-switch>
Value
Type : boolean

Sets the value of the switch.

Usage example:

<mefdev-switch [Value]="true"></mefdev-switch>

Outputs

onChange
Type : function

HostListeners

click
Arguments : '$event'
click(e: MouseEvent)

Methods

onClick
onClick(e: MouseEvent)
Decorators :
@HostListener('click', ['$event'])
Parameters :
Name Type Optional
e MouseEvent No
Returns : void
registerOnChange
registerOnChange(fn: (_: boolean) => void)

Registers a callback function to be executed when the switch value changes.

Usage example:

this.registerOnChange(value => {
  // Do something with the new value
});
Parameters :
Name Type Optional Description
fn function No

The callback function.

Usage example:

this.registerOnChange(value => {
// Do something with the new value
});
Returns : void
registerOnTouched
registerOnTouched(fn: () => void)

Registers a callback function to be executed when the switch is touched.

Usage example:

this.registerOnTouched(() => {
  // Do something when the switch is touched
});
Parameters :
Name Type Optional Description
fn function No

The callback function.

Usage example:

this.registerOnTouched(() => {
// Do something when the switch is touched
});
Returns : void
setClassMap
setClassMap()

Sets the class map for the switch.

Usage example:

this.setClassMap();
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)

Sets the disabled state of the switch.

Usage example:

this.setDisabledState(true);
Parameters :
Name Type Optional Description
isDisabled boolean No

The disabled state of the switch.

Usage example:

this.setDisabledState(true);
Returns : void
Static switchValueAccessor
switchValueAccessor()

Get the value accessor provider configuration for the switch component.

Returns : any
updateValue
updateValue(value: boolean)

Updates the value of the switch.

Usage example:

this.updateValue(true);
Parameters :
Name Type Optional Description
value boolean No

The new value of the switch.

Usage example:

this.updateValue(true);
Returns : void
Public writeValue
writeValue(value: boolean)

Writes a new value to the switch.

Usage example:

this.writeValue(true);
Parameters :
Name Type Optional Description
value boolean No

The new value of the switch.

Usage example:

this.writeValue(true);
Returns : void

Properties

_checked
Default value : false
_classMap
Type : any
_color
Type : string
Default value : "primary"
_innerPrefixCls
Default value : `${this._prefixCls}-inner `
_prefixCls
Type : string
Default value : "toggle-switch"
_size
Type : string
onTouched
Type : function
Default value : () => {...}

Accessors

Value
setValue(value: boolean)

Sets the value of the switch.

Usage example:

<mefdev-switch [Value]="true"></mefdev-switch>
Parameters :
Name Type Optional Description
value boolean No

The value of the switch.

Usage example:

<mefdev-switch [Value]="true"></mefdev-switch>
Returns : void
Size
getSize()

Gets the current size of the switch.

Usage example:

const size = mySwitchComponent.Size;
Returns : string
setSize(value: string)

Sets the size of the switch.

Usage example:

<mefdev-switch [Size]="'small'"></mefdev-switch>
Parameters :
Name Type Optional Description
value string No

The size of the switch (e.g., "small", "large").

Usage example:

<mefdev-switch [Size]="'small'"></mefdev-switch>
Returns : void
Color
setColor(value: string)

Sets the color of the switch.

Usage example:

<mefdev-switch [Color]="'primary'"></mefdev-switch>
Parameters :
Name Type Optional Description
value string No

The color of the switch (e.g., "primary", "secondary").

Usage example:

<mefdev-switch [Color]="'primary'"></mefdev-switch>
Returns : void
Disabled
getDisabled()

Gets the current disabled state of the switch.

Usage example:

const disabled = mySwitchComponent.Disabled;
Returns : boolean
setDisabled(value: boolean)

Sets the disabled state of the switch.

Usage example:

<mefdev-switch [Disabled]="true"></mefdev-switch>
Parameters :
Name Type Optional Description
value boolean No

The disabled state of the switch.

Usage example:

<mefdev-switch [Disabled]="true"></mefdev-switch>
Returns : void

results matching ""

    No results matching ""