Bootstrap-styled Toggle Control For Angular 2+

Angular v2+ Bootstrap-styled Toggle that can be used as a standalone toggle or can convert checkboxes into UI toggles.

Dependencies of Bootstrap-styled Toggle

  • Angular (tested with 7.0.0)
  • Bootstrap 4 (tested with 4.2.1)
ng-toggleAngularBootstrap CSS

Installation of Bootstrap-styled Toggle

After installing the above dependencies, install ng-toggle via:

npm install --save @nth-cloud/ng-toggle

Import the main module into your project:

import {NgToggleModule} from '@nth-cloud/ng-toggle';

Import the module into your application:

import {NgToggleModule} from '@nth-cloud/ng-toggle';

  declarations: [AppComponent, ...],
  imports: [NgToggleModule, ...],
  bootstrap: [AppComponent]
export class AppModule {

If you are using SystemJS, you should adjust your configuration to point to the UMD bundle.

In your systemJS config file, map needs to tell the System loader where to look for ngx-toggle:

map: {
  '@nth-cloud/ng-toggle': 'npm:@nth-cloud/ng-toggle/dist/bundles/ng-toggle.js',

Supported browsers

We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive. See this for up-to-date Angular browser support.

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
  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)

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

For More Angular Plugins And Forms Click

Leave a Reply

Your email address will not be published. Required fields are marked *