15 different Angular 2 / Bootstrap switch styles

The jw-bootstrap-switch-ng2 directive

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.

The directive for the Bootstrap switch is based on JavaScript and does not use jQuery.

Demo
Developer page Download plug-in

How to install and use the Angular directive?

You may install this directive by npm:

npm install jw-bootstrap-switch-ng2 –save

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):

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

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

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.

A demo of Bootstrap switches with 15 styles

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.

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 – Have a look at all styles:

Angular switches

See online demo and code

In the code, the JS and CSS files are bundled as follows:

  <app-root>Loading...</app-root>

<script type="text/javascript" src="js/jw-bootstrap-switch-ng2/inline.1f759270d0fa3364928a.bundle.js">

</script><script type="text/javascript" src="js/jw-bootstrap-switch-ng2/polyfills.18173234f9641113b9fe.bundle.js">



</script><script type="text/javascript" src="js/jw-bootstrap-switch-ng2/vendor.8017ce90e477aa1b6747.bundle.js"></script>

<script type="text/javascript" src="js/jw-bootstrap-switch-ng2/main.7c9eb1a278bf4513f0b5.bundle.js"></script>

You may download the source files from the above link from GitHub website and amend this as you require and repackage that.

The options available for setting switches

A few of the options available for creating the switches are:

  • switch-label-width //Sets the width label
  • switch-label-text
  • switch-on-text //Sets the text for ON state e.g. Yes, On, True, Agree etc.
  • switch-off-text //Set the text for Off state e.g. No, Off, False, Don’t Agree etc.
  • switch-on-color //Color for On state of the switch
  • switch-off-color //Color for the Off state of the switch

and much more. Read more about this by visiting the developer page.