Topic: mdb-checkbox displaying but not working on click.

andreotid free asked 3 years ago


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.


Arkadiusz Idzikowski staff commented 3 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 free commented 3 years ago

It's inside a form and wrapped like this:

    <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>

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(),


Arkadiusz Idzikowski staff answered 3 years ago


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 free commented 3 years ago

Perfect, with the change on the property id to [id] now it works.

Thank you Arkadiusz


pzimmer priority commented 3 years ago

Is this being fixed or should we use the [id] work-around?


Arkadiusz Idzikowski staff commented 3 years ago

@pzimmer This problem has not been fixed yet, please use the [id] input.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: 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