This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[HELP] Support for angular? #128
Comments
Hi! 👋 |
Edit: using this snippet in my javascript console works. But how should I fix this for angular?
|
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 |
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:
|
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 :) |
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! |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Would this plugin work with angular? Currently when I navigate away from the component and come back the slider is just a checkbox again.
The text was updated successfully, but these errors were encountered: