The Toggle Button allows you to perform the toggle option by using checked and unchecked state. This Toggle Button can be helpful to user to check their states. The Toggle Button control displays both text and images.

{% highlight html %}

{% endhighlight %}

{% highlight html %}

{% endhighlight %}

• module:jQuery

• module:ej.core.js

• module:ej.togglebutton.js

• module:ej.checkbox.js

{:#members:activeprefixicon}

Specify the icon in active state to the toggle button and it will be aligned from left margin of the button.

N> This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

• ""

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="play" activeText="Pause" [contentType]="contentType" [activePrefixIcon]="activePrefixIcon" [defaultPrefixIcon]="defaultPrefixIcon">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; activePrefixIcon: string; defaultPrefixIcon: string; constructor() { this.contentType = "textandimage"; this.activePrefixIcon="e-mediapause e-uiLight"; this.defaultPrefixIcon="e-mediaplay e-uiLight"; }; }

{% endhighlight %}

{:#members:activesuffixicon}

Specify the icon in active state to the toggle button and it will be aligned from right margin of the button.

N> This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

• ""

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" [contentType]="contentType" [activeSuffixIcon]="activeSuffixIcon" defaultSuffixIcon="defaultSuffixIcon">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; activeSuffixIcon: string; defaultSuffixIcon: string; constructor() { this.contentType = "imageboth"; this.activeSuffixIcon="e-mediapause e-uiLight"; this.defaultSuffixIcon="e-mediaplay e-uiLight"; }; }

{% endhighlight %}

{:#members:activetext}

Sets the text when ToggleButton is in active state i.e.,checked state.

• null

{% highlight html %}

{% endhighlight %}

{:#members:contenttype}

Specifies the contentType of the ToggleButton. See ContentType as below

• ej.ContentType.TextOnly

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [contentType]="contentType">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; constructor() { this.contentType = ej.ContentType.TextOnly; }; }

{% endhighlight %}

{:#members:cssclass}

Specify the CSS class to the ToggleButton to achieve custom theme.

• ""

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [cssClass]="customCss">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { customCss: string; constructor() { this.customCss = "gradient-lime"; }; }

{% endhighlight %}

{:#members:defaultprefixicon}

Specify the icon in default state to the toggle button and it will be aligned from left margin of the button.

N> This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

• ""

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [contentType]="contentType" [activePrefixIcon]="activePrefixIcon" [defaultPrefixIcon]="defaultPrefixIcon">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; activePrefixIcon: string; defaultPrefixIcon: string; constructor() { this.contentType = "textandimage"; this.activePrefixIcon="e-mediapause e-uiLight"; this.defaultPrefixIcon="e-mediaplay e-uiLight"; }; }

{% endhighlight %}

{:#members:defaultsuffixicon}

Specify the icon in default state to the toggle button and it will be aligned from right margin of the button.

N> This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

• ""

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [contentType]="contentType" [activeSuffixIcon]="activeSuffixIcon" [defaultSuffixIcon]="defaultSuffixIcon">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; activeSuffixIcon: string; defaultSuffixIcon: string; constructor() { this.contentType = "textandimage"; this.activeSuffixIcon="e-mediapause e-uiLight"; this.defaultSuffixIcon="e-mediaplay e-uiLight"; }; }

{% endhighlight %}

{:#members:defaulttext}

Specifies the text of the ToggleButton, when the control is a default state. i.e., unChecked state.

• null

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { defaultText: string; activeText: string; constructor() { this.defaultText="Play"; this.activeText="Pause"; }; }

{% endhighlight %}

{:#members:enabled}

Specifies the state of the ToggleButton.

• true

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [enabled]="true">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { defaultText: string; activeText: string; constructor() { this.defaultText="Play"; this.activeText="Pause"; }; }

{% endhighlight %}

{:#members:enablepersistence}

Save current model value to browser cookies for maintaining states. When refreshing the ToggleButton control page, the model value is applied from browser cookies or HTML 5 local storage.

• false

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [enablePersistence]="true">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { defaultText: string; activeText: string; constructor() { this.defaultText="Play"; this.activeText="Pause"; }; }

{% endhighlight %}

{:#members:enablertl}

Specify the Right to Left direction of the ToggleButton.

• false

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [enableRTL]="true">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { defaultText: string; activeText: string; constructor() { this.defaultText="Play"; this.activeText="Pause"; }; }

{% endhighlight %}

{:#members:height}

Specifies the height of the ToggleButton.

• 28pixel

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [height]="height">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { defaultText: string; activeText: string; height: string; constructor() { this.defaultText="Play"; this.activeText="Pause"; this.height= "28px"; }; }

{% endhighlight %}

{:#members:htmlattributes}

It allows to define the characteristics of the ToggleButton control. It will helps to extend the capability of an HTML element.

• {}

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [htmlAttributes]="htmlAttributes">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { defaultText: string; activeText: string; htmlAttributes: Object; constructor() { this.defaultText="Play"; this.activeText="Pause"; this.htmlAttributes= {disabled:"disabled"}; }; }

{% endhighlight %}

{:#members:imageposition}

Specifies the image position of the ToggleButton.

N> This image position is applicable only with the contentType property value set as textandimage. The images can be positioned in both imageLeft and imageRight options.

• ej.ImagePosition.ImageLeft

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [contentType]="contentType" [imagePosition]="imagePosition" [activePrefixIcon]="activePrefixIcon" [defaultPrefixIcon]="defaultPrefixIcon">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; activePrefixIcon: string; defaultPrefixIcon: string; imagePosition: any; constructor() { this.contentType = ej.ContentType.TextAndImage; this.activePrefixIcon="e-mediapause e-uiLight"; this.defaultPrefixIcon="e-mediaplay e-uiLight"; this.imagePosition=ej.ImagePosition.ImageRight; }; }

{% endhighlight %}

{:#members:preventtoggle}

Allows to prevents the control switched to checked (active) state.

• false

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [preventToggle]="false">

{% endhighlight %}

{:#members:showroundedcorner}

Displays the ToggleButton with rounded corners.

• false

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [showRoundedCorner]="true">

{% endhighlight %}

{:#members:size}

Specifies the size of the ToggleButton. See ButtonSize as below

• ej.ButtonSize.Normal

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [size]="size">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { size: any; constructor() { this.size = ej.ButtonSize.Mini; }; }

{% endhighlight %}

{:#members:togglestate}

It allows to define the ToggleButton state to checked(Active) or unchecked(Default) at initial time.

• false

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [toggleState]="false">

{% endhighlight %}

{:#members:type}

Specifies the type of the ToggleButton. See ButtonType as below

• ej.ButtonType.Button

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [type]="type">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { type: any; constructor() { this.type = ej.ButtonType.Submit; }; }

{% endhighlight %}

{:#members:width}

Specifies the width of the ToggleButton.

• 100pixel

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [width]="width">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { width: string; constructor() { this.width = "100px"; }; }

{% endhighlight %}

{:#methods:destroy}

Allows you to destroy the ToggleButton widget.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create instance of ToggleButton var toggleObj = $("#toggleButton").data("ejToggleButton"); toggleObj.destroy(); // destroy the toggle button

{% endhighlight %}

{:#methods:disable}

To disable the ToggleButton to prevent all user interactions.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create instance of ToggleButton var toggleObj = $("#toggleButton").data("ejToggleButton"); toggleObj.disable(); // disable the toggle button

{% endhighlight %}

{:#methods:enable}

To enable the ToggleButton.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create instance of ToggleButton var toggleObj = $("#toggleButton").data("ejToggleButton"); toggleObj.enable(); // enable the toggle button

{% endhighlight %}

{:#events:ejchange}

Fires when ToggleButton control state is changed successfully.

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" (ejchange)="onChange($event)">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onChange(e: any){ // Your code here } }

{% endhighlight %}

{:#events:click}

Fires when ToggleButton control is clicked successfully.

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" (ejclick)="onClick($event)">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onClick(e: any){ // Your code here } }

{% endhighlight %}

{:#events:create}

Fires when ToggleButton control is created successfully.

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" (create)="onCreate($event)">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onCreate(e: any){ // Your code here } }

{% endhighlight %}

{:#events:destroy}

Fires when ToggleButton control is destroyed successfully.

{% highlight html %}

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" (destroy)="onDestroy($event)">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onDestroy(e: any){ // Your code here } }

{% endhighlight %}