title: How to resolve 'mdb-accordion' is not a known element: error in Angular app?
body: <p>I am trying to add the Material Design Bootstrap Accordion to my angular app using <a href="https://mdbootstrap.com/docs/angular/advanced/accordion/#o-basic-accordion" rel="nofollow noreferrer">this</a> example.</p>
  <p>Here is my HTML:</p>
  <pre><code>&lt;mdb-accordion [multiple]=&quot;false&quot;&gt;
      &lt;mdb-accordion-item [collapsed]=&quot;false&quot;&gt;
        &lt;mdb-accordion-item-head&gt;Collapsible Group Item #1&lt;/mdb-accordion-item-head&gt;
        &lt;mdb-accordion-item-body&gt;
          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
        &lt;/mdb-accordion-item-body&gt;
  &lt;/mdb-accordion-item&gt;
  &lt;/mdb-accordion&gt;
  </code></pre>
  <p>Here is the error message I am getting:</p>
  <blockquote>
  <p>'mdb-accordion' is not a known element:</p>
  <ol>
  <li><p>If 'mdb-accordion' is an Angular component, then verify that it is part of this module.</p>
  </li>
  <li><p>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)</p>
  </li>
  </ol>
  </blockquote>
  <p>Here is what I have in my Angular.json:</p>
  <pre><code>&quot;styles&quot;: [
            &quot;node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss&quot;,
            &quot;node_modules/@fortawesome/fontawesome-free/scss/solid.scss&quot;,
            &quot;node_modules/@fortawesome/fontawesome-free/scss/regular.scss&quot;,
            &quot;node_modules/@fortawesome/fontawesome-free/scss/brands.scss&quot;,
            &quot;node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss&quot;,
            &quot;node_modules/angular-bootstrap-md/assets/scss/mdb.scss&quot;,
            &quot;./node_modules/quill/dist/quill.core.css&quot;,
            &quot;./node_modules/quill/dist/quill.snow.css&quot;,
            &quot;node_modules/animate.css/animate.css&quot;,
            &quot;src/styles.css&quot;
          ],
  &quot;scripts&quot;: [
            &quot;node_modules/chart.js/dist/Chart.js&quot;,
            &quot;node_modules/hammerjs/hammer.min.js&quot;,
            &quot;./node_modules/quill/dist/quill.js&quot;
           ]
  </code></pre>
  <p>And I have the following in my App Module:</p>
  <pre><code>import { MDBBootstrapModule } from 'angular-bootstrap-md';
  
  @NgModule({
  imports: [
      MDBBootstrapModule.forRoot(),
  ],
  })
  export class AppModule { }
  </code></pre>
  <p>I tried adding something like <em><strong>MDBootstrapAccordion</strong></em> to the import in App Module, but nothing was appearing.</p>
  <p>Can someone please tell me what I'm missing to get the accordion displaying?</p>