Adding Bootstrap Plugins to Angular 8

Question

I'm new to Angular and trying to figure out how to bring in a Bootstrap Plugin, specifically the Bootstrap Toggle , to Angular 8. Here is what I have tried.

Installed bootstrap , jquery , popper.js , bootstrap-toggle

In angular.json I added

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

In the app.module.ts I added

import bootstrap from "bootstrap";

Then for testing I added the following to the app.component.html

<div class="container">
    <p> Please enter your name</p>
    <form class="form-inline">
        <div class="form-group col-sm-12 justify-content-center">
            <div class="col-sm-6">
                <input class="form-control" style="width:100%" #invitation>
            </div>
            <button type="submit" class="btn btn-primary">Search</button>

        </div>            
    </form>
    <input type="checkbox" checked data-toggle="toggle">
</div>

The checkbox is not changed to a toggle. Any ideas why?

https://stackblitz.com/edit/angular-tlghnn

Answer 1

Try to add like this

<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>

Answer 2

i think the problem is declaring styles in

angular.json -> ./node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css

it can't find this node module make sure that you have installed it correctly, if it is the correct then it is the problem with providers of that package. you can use one of the answers above they work fine