mdb-checkbox displaying but not working on click.

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

andreotid pro priority asked 5 months 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 5 months 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 pro priority commented 5 months 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>

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

andreotid pro priority commented 5 months ago

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

Thank you Arkadiusz

pzimmer pro priority commented 1 months ago

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

Arkadiusz Idzikowski staff commented 1 months ago

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

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • 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