Error when using the Accordion


Topic: Error when using the Accordion

tommykjensen asked 4 years ago

I have an Angular project. V11.x

I am trying to use the accordion basic example in my project but I am getting an error. I am using the code example like the sample code here:

https://mdbootstrap.com/docs/standard/components/accordion/

In my component I import MDB like this:

import * as mdb from 'mdb-ui-kit';

The accordion do expand and collapse as expevedted but I get following error on the first panel I open and all subnsequent opens of THAT one specific panel, none of the other generate this error. So If I start by opening panel two that will generate the error and none of the other will. If I refresh and start opening one of the other panels then that will generate this error:

Uncaught TypeError: No method named "toggle" at Function.value (mdb.min.js:310) at mdb.min.js:310 at Array.forEach () at HTMLButtonElement. (mdb.min.js:310) at HTMLDocument.e (mdb.min.js:310) at ZoneDelegate.invokeTask (zone.js:421) at Zone.runTask (zone.js:188) at ZoneTask.invokeTask [as invoke] (zone.js:503) at invokeTask (zone.js:1671) at HTMLDocument.globalZoneAwareCaptureCallback (zone.js:1740)

In the same project I am using the Modal and this works find so the MDB library is loaded.


Grzegorz Bujański staff commented 4 years ago

How do you add MDB? Have you made the necessary changes to the angular.json file?


tommykjensen commented 4 years ago

I have this in my angular json:

        "styles": [
          "node_modules/mdb-ui-kit/css/mdb.dark.min.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/mdb-ui-kit/js/mdb.min.js",
          "node_modules/@fortawesome/fontawesome-pro/js/all.min.js"
        ],

tommykjensen commented 4 years ago

I recorded a video to illustrate the problem. Watch the console log. https://youtu.be/pFFgweeBIS8


Grzegorz Bujański staff answered 4 years ago

From what I can see this error is related to zone.js. Unfortunately, MDB5 Standard has not been adapted to work with Angular and such problems may occur. We are currently working on a version for Angular. It is already available in an Alpha version.


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
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: pc
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes
Tags