Angular 10 - Using bootstrap-toggle style for Angular Material

Question

I am using Angular Material for styling but I would like to use bootstraps toggle style instead of Materials' mat-slide-toggle. Isn't possible to use it with out having to install bootstrap. here is the style I would like to use from bootstrap. And here is the Material style I would like to replace.

Answer 1

If you don't want to install Bootstrap, you'll need to recreate the relevant code manually in your project.

But, this means you'll need to carefully find all the correct CSS and JS in the Bootstrap repo, which could be painstaking as the CSS is spread all over the place and may inherit other CSS based upon parent elements. Also, depending on the toggle state, the CSS could change.

Here's a few of the main CSS things I found:

.toggle {
    position: relative;
    overflow: hidden;
}
.toggle-on.btn {
    padding-right: 24px;
}
.toggle-on {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    margin: 0;
    border: 0;
    border-radius: 0;
}
.toggle-off.btn {
    padding-left: 24px;
}

.toggle-group {
    position: absolute;
    width: 200%;
    top: 0;
    bottom: 0;
    left: 0;
    transition: left 0.35s;
    -webkit-transition: left 0.35s;
    -moz-user-select: none;
    -webkit-user-select: none;
}
div.toggle {
    margin-right: 10px;
}
.toggle.btn {
    min-width: 59px;
    min-height: 34px;
}
.toggle input[type="checkbox"] {
    display: none;
}
.toggle-handle {
    position: relative;
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 100%;
    width: 0px;
    border-width: 0 1px;
}
.btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default {
    background-image: none;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

And that's just the low-hanging CSS fruit. It'll take quite a bit of trial and error to get everything just the same way Bootstrap is doing it.

Plus, Bootstrap is using CSS to hide the actual checkbox and then using JS to add in a whole new div:

<div class="toggle-group">
  <label class="btn btn-primary toggle-on">On</label>
  <label class="btn btn-default active toggle-off">Off</label>
  <span class="toggle-handle btn btn-default"></span></div>

And then adding functions to control linking this new DOM stuff to the checkbox state, handle the clicking of the new toggle, and so on.

TL;DR it's a LOT to recreate.

And, based on the site you provided, you aren't adding all of Bootstrap, just the Toggle ability, so I don't really see why you wouldn't just bring it into your project.

If you really don't want to "install", you can just use the CDN:

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

Note the warning:

If you are using Bootstrap v2.3.2, use bootstrap2-toggle.min.js and bootstrap2-toggle.min.css instead.