angular-bootstrap-toggle

How do you setup angular-bootstrap-toggle on an Angular 9 app?


I'm learning Angular 9 and have gone through the Tour of Heroes app and tutorial. I've used this tutorial as a base to add new features such as CRUD operations on a remote resource and I have added @ng-bootstrap/ng-bootstrap to the projects but I cannot get angular-bootstrap-toggle to work.

The instructions on Bootstrap Toggle don't match what I have learned so far and I can't find a solution anywhere.

For example, I don't know how this command angular.module('myApp', ['ui.toggle']); fits in with Angular 9 and the tutorial I have used.

How can I get the system to call onChange() when I click the toggle?

angular.json

    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/bootstrap4-toggle/css/bootstrap4-toggle.min.css",
      "src/styles.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
      "node_modules/bootstrap4-toggle/js/bootstrap4-toggle.min.js"
    ]

navigation-bar.component.html This displays correctly and toggles as expected

<input id="local-browse" (change)="onChange()" type="checkbox" checked="" data-toggle="toggle" data-on="Local" data-off="Remote" data-onstyle="success" data-offstyle="danger" data-size="sm">

navigation-bar.component.ts If I put in a standard checkbox the onChange() does work as expected but not with angular-bootstrap-toggle

  import { Component, OnInit } from '@angular/core';

  declare var $: any;

  @Component({
    selector: 'app-navigation-bar',
    templateUrl: './navigation-bar.component.html',
    styleUrls: ['./navigation-bar.component.css'],
  })
  export class NavigationBarComponent implements OnInit {
    localUrl = 'http://192.168.253.53';
    remoteUrl = 'https://remoteaddress.com';
    local = true;

    constructor() {}

    ngOnInit(): void {
      $(document).ready(() => {
        console.log('The document ready for jQuery!');
      });
    }

    onChange() {
      if (this.local === true) {
        this.local = false;
      } else {
        this.local = true;
      }
    }
  }

Solution

  • I dont think it is compatible with Angular 2+ (or at least angular 9). You may like to use ng-toggle from https://www.npmjs.com/package/@nth-cloud/ng-toggle Which is tested on Angular 9. More information about installation in https://nth-cloud.github.io/ng-toggle/#/home