Topic: is it possible to reset Checkbox component?
So I have several list style pages, each their own component. Each item in the list has a checkbox.
I have also made it so you can select all checkboxes in the list with the header checkbox. I also have buttons that show if one or more checkboxes are selected, so I have to be able to keep track of that.
Everything works great... except when I switch to a new page with a new list.
It seems to have checkbox objects from the previous page.
Is there a way to reset or reinitialize the Checkbox component when I initialize a new component with ngOnInit or ngAfterViewInit? Everything always seems to work fine on the first component.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: Desktop
- Browser: Chrome
- OS: OSX
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
Please add some example code on which we will be able to reproduce this problem.
Nate commented 4 years ago
Just wrote a massive comment and went to submit it, and it did not post for some reason...
I can't add some example code because I would need to write an entire sample of my application (several components and html files) to provide you with a detailed enough example to show you the problem, and I don't have time to do that.
I have a component template that displays a list dynamically in a table with a checkbox (via *ngFor).
everything with the checkboxes works normally in the initial component loaded.
When I navigate to a new component (i.e. load a new component with that template) the checkboxes no longer work properly. while the generated IDs are different, it appears the new component is still referencing some of the previous components checkboxes.
I have tried assigning my own IDs but the same issue persists.
When the new component is loaded everything is reinitialized, except for the checkbox module, because I see no way in the API to do this.
So my question is: Is it possible to manually reset or reinitialize the checkbox module so that it doesn't reference checkboxes from a previous component?
Edit: If there is no way to reset the checkbox component manually can you show me how you would go about setting up a dynamic list template with checkboxes that can switch between multiple components?
Nate commented 4 years ago
Update: I was able to find an alternative solution, but I am still curious if you have time to provide an answer.
Arkadiusz Idzikowski staff commented 4 years ago
We understand that presenting all the application logic would take to much time, but we need a bit more information to recreate the problem on our end.
We tried to reproduce this problem by following the steps below: 1. Created a reusable component and added some checkboxes to its template. 2. Created two custom components and added the component with checkboxes to the custom components templates. 3. Then we navigated to the first component (with Angular routing), selected some checkboxes and navigated to the second component.
But it looks like everything is working correctly, the checkboxes state is reseted when we switch between views.
Does your application works in a similar way or should we do something differently? I'm afraid there is no way to reset the module manually, the components should be destroyed and reinitialized when you change the view with Angular router.