[HELP] Support for angular?

[woeterman94]

Would this plugin work with angular? Currently when I navigate away from the component and come back the slider is just a checkbox again.

[github-actions[bot]]

Hi! 👋
Thanks for your issue. You are helping to improve Bootstrap 5 toggle.

[woeterman94]

Edit: using this snippet in my javascript console works. But how should I fix this for angular?

    const activeSlider = document.querySelector("#activeSlider");
    activeSlider.bootstrapToggle();

[palcarazm]

Hi @woeterman94 ,

I'm not into angular, so no idea.

However i think it could be that The Red are no types defined in bootstrap-toggle

[Aileron79]

I can confirm, I am using the toggle inside a self-made stepper in Angular 16. The wrapping div is active when currentStep == 1. Setting currentStep = 2, waiting for the page to re-render, setting it back to currentStep = 1 again, the toggle is basically gone:

<div *ngIf="currentStep === 1">
....
          <div>
                <input class="form-control " id="updateEmailCheckbox" type="checkbox" [(ngModel)]="updateEmail" data-toggle="toggle" data-onlabel="Yes" data-offlabel="No" />
          </div>
...
</div>

Before:

After:

[aschoerg]

What I found as a workaround but I am not sure, if this is a desirable method ...

In your component.ts, implement AfterViewInit and run a query selector. The selector ensures it only runs on not initialized inputs. @ts-ignore is needed, because this lib adds a function to all elements, but ts does not know about this.

export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // @ts-ignore
    document.querySelectorAll('*:not(div.toggle)>input[type="checkbox"][data-toggle="toggle"]').forEach(i => i.bootstrapToggle());
  }
}

And in my angular.json file, I have included:

{
  "projects": {
    "Frontend": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "...",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/bootstrap5-toggle/css/bootstrap5-toggle.css"
            ],
            "scripts": [
              "...",
              "node_modules/bootstrap5-toggle/js/bootstrap5-toggle.ecmas.js"
            ]

Let me know when this component is Angular ready. I am looking for a nice Angular compatible toggle button :)

[palcarazm]

Hi, thanks for your workaround.

I want to make a react components, but I'm not into angular.

If you want to adapt this google button implementation in angular we can make a linked repository.

Thanks you very much!

[aschoerg]

Hi @palcarazm ,

Sorry for the late reply, totally forgotten 😅

I think building an Angular component would be a complete re-implementation (function-wise) and just re-use the style part. jQuery does a lot of stuff, which could Angular do easily.

I just used this component in a personal helper app, so just making it work was enough for me 😉 But if I need a Toggl-Switch in Angular for a future project, I might create a component, but cannot promise, since publishing takes more commitment.

If someone reading this, needing this lib as Angular component, please upvote to let me see the demand 🚀