{"id":3604,"date":"2017-05-17T07:56:10","date_gmt":"2017-05-17T07:56:10","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3604"},"modified":"2023-09-24T13:42:32","modified_gmt":"2023-09-24T13:42:32","slug":"15-different-angular-2-bootstrap-switch-styles","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/15-different-angular-2-bootstrap-switch-styles\/","title":{"rendered":"15 different Angular 2 \/ Bootstrap switch styles"},"content":{"rendered":"

The jw-bootstrap-switch-ng2 directive<\/strong><\/h3>\n

The jw-bootstrap-switch-ng2 is a solution for creating the Bootstrap switches by Angular 2. A switch is a checkbox turned into the On\/Off, Yes\/No etc. buttons.<\/p>\n

The directive for the Bootstrap switch is based on JavaScript and does not use jQuery.<\/p>\n

Demo<\/h6>\n
Developer page<\/strong><\/a> Download plug-in<\/strong><\/a><\/h6>\n

How to install and use the Angular directive?<\/strong><\/h3>\n

You may install this directive by npm:<\/p>\n

npm install jw-bootstrap-switch-ng2 \u2013save<\/p><\/blockquote>\n

As this is for Bootstrap, you need to include the reference of Bootstrap CSS library along with bootstrap-switch.css. Include the references of both in the <head> section (via CDN):<\/p>\n

\u00a0 <link rel=”stylesheet” href=”https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css”><\/p>\n

<link rel=”stylesheet” href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-switch\/3.3.2\/css\/bootstrap3\/bootstrap-switch.css”><\/p><\/blockquote>\n

The directive has many options that you may see in the demo below. For learning more about the options and configuration, also visit the developer page.<\/p>\n

A demo of Bootstrap switches with 15 styles<\/strong><\/h3>\n

For the demo, different switches are created by using Angular with Bootstrap. These include a switch with On and Off state, a switch with various sizes that you may set by using the button below the switch. You may set the Mini, Small, Normal and Large sizes.<\/p>\n

A switch style with animation is also given while you may also see Disabled and Read-only switches. You may also set the color of On and Off labels that uses the ordinary Bootstrap class codes i.e. green for success, light blue for info, blue for primary etc. The demo also includes setting different colors for switches \u2013 Have a look at all styles:<\/p>\n

\"Angular<\/p>\n

See online demo and code<\/strong><\/h6>\n

In the code, the JS and CSS files are bundled as follows:<\/p>\n

\u00a0 <app-root>Loading...<\/app-root>\r\n\r\n<script type=\"text\/javascript\" src=\"js\/jw-bootstrap-switch-ng2\/inline.1f759270d0fa3364928a.bundle.js\">\r\n\r\n<\/script><script type=\"text\/javascript\" src=\"js\/jw-bootstrap-switch-ng2\/polyfills.18173234f9641113b9fe.bundle.js\">\r\n\r\n\r\n\r\n<\/script><script type=\"text\/javascript\" src=\"js\/jw-bootstrap-switch-ng2\/vendor.8017ce90e477aa1b6747.bundle.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\" src=\"js\/jw-bootstrap-switch-ng2\/main.7c9eb1a278bf4513f0b5.bundle.js\"><\/script><\/pre>\n
You may download the source files from the above link from GitHub website and amend this as you require and repackage that.<\/p>\n
The options available for setting switches<\/strong><\/h3>\n
A few of the options available for creating the switches are:<\/p>\n