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

Add comment

Grzegorz Bujański staff answered 4 years ago

0 1 Best answer

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.

Add comment

Write

Create snippet

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

tommykjensen

150Support score
12Questions 8Answers

0Snippets likes 0Snippets