[FIXED] How to resolve 'mdb-accordion' is not a known element: error in Angular app?

Issue

I am trying to add the Material Design Bootstrap Accordion to my angular app using this example.

Here is my HTML:

<mdb-accordion [multiple]="false">
    <mdb-accordion-item [collapsed]="false">
      <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
      <mdb-accordion-item-body>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
        aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
      </mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>

Here is the error message I am getting:

'mdb-accordion' is not a known element:

1. If 'mdb-accordion' is an Angular component, then verify that it is part of this module.

2. If 'mdb-accordion' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng(0)

Here is what I have in my Angular.json:

"styles": [
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
          "./node_modules/quill/dist/quill.core.css",
          "./node_modules/quill/dist/quill.snow.css",
          "node_modules/animate.css/animate.css",
          "src/styles.css"
        ],
"scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/hammerjs/hammer.min.js",
          "./node_modules/quill/dist/quill.js"
         ]

And I have the following in my App Module:

import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
imports: [
    MDBBootstrapModule.forRoot(),
],
})
export class AppModule { }

I tried adding something like MDBootstrapAccordion to the import in App Module, but nothing was appearing.

Can someone please tell me what I'm missing to get the accordion displaying?

Solution

You use MDB Free and mdb-accordion is not available in this version. You would need to purchase PRO version in order to use it in your project.

As you can see, there is a 'MDB Pro component' label in the documentation:

https://mdbootstrap.com/docs/angular/advanced/accordion/

Answered By - idzark

Answer Checked By - Mary Flores (PHPFixing Volunteer)