28 Jun 2017 / 2 minutes to read
This section explains briefly about how to create a Toggle Button in your application with AngularJS
Toggle Button Creation
Create an HTML file and paste the following template to HTML file for ejToggleButton creation.
<!DOCTYPE html> <html lang="en" ng-app="ToggleCtrl"> <head> <title>Getting Started Essential JS</title> <!-- Style sheet for default theme (flat azure) --> <link href="http://cdn.syncfusion.com/184.108.40.206/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" /> <!--Scripts--> <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script> <script src="http://cdn.syncfusion.com/220.127.116.11/js/web/ej.web.all.min.js"></script> <!--Add custom scripts here --> </head> <body ng-controller="ToggleButtonCtrl"> <!--add Toggle Button element here--> </body> </html>
The ng-app directive explains the root element (<html> or <body> tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you will have to define your directives, services, filters and configurations.
Properties can be bind to ejToggleButton control using the prefix e- and particular property name as shown as below
Adding input Checkbox element for Toggle Button rendering.
<input type="checkbox" id="tbutton" ej-togglebutton e-size="size"/> <label for="tbutton">Play</label>
The advantages of using checkbox element and label element for the rendering of Toggle Button are as follows.
A label element has to be explicitly associate a form control. A label is attached to a specific form control through the use of for attribute. The value of for attribute must be the same as the value of the id attribute of the form control. Clicking on the label or the control will activate the control in order to provide larger area of the control.
Output of above steps