Topic: mdb-checkbox displaying but not working on click.
I have MDB PRO imported in my angular app and other pro components are working properly but mdb-checkbox is displaying correct but when I click the checkbox it doesn't change.
I can set it via html with [checked] = true and it changes but the click button doesn't work, and I don't have any click eventListener or any function affecting checkboxes.
It looks like there is a problem with id input. Please update your code to:
<div class="col-md-6">
<div class="md-form">
<label class="active" for="chk">xxx?</label>
<mdb-checkbox [id]="'chk'">xxx</mdb-checkbox>
</div>
</div>
Edit:
When id="uniqueId" syntax is used the component inteprets it as an HTML attribute, not an Angular input, and because of that, the id is attached to the mdb-checkbox component instead of underlying input. We will change the [id] input name to [checkboxId] in the next major update (v13) to resolve this problem.
andreotid commented 4 years ago
Perfect, with the change on the property id to [id] now it works.
Thank you Arkadiusz
pzimmer pro premium priority commented 4 years ago
Is this being fixed or should we use the [id] work-around?
Arkadiusz Idzikowski staff commented 4 years ago
@pzimmer This problem has not been fixed yet, please use the [id] input.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
Is the checkbox wrapped in any element that could cause this problem or is it just added directly to the application view? Are there any errors in the console when you try to click the component?
andreotid commented 4 years ago
It's inside a form and wrapped like this:
If i put it in an empty component.html it doesn't work either.
No the console doesn't output anything.
In my app.module I have:
import {MDBBootstrapModulesPro} from 'ng-uikit-pro-standard';
and in the @NgModule imports array: MDBBootstrapModulesPro.forRoot(),