Expected behavior

Clicking a nested tab should expand it, not collapse the above tab.

Actual behavior

Clicking the nested tab collapses its parent, causing its contents to never be seen. This is only occurring from the dynamic one, I can get static accordions to work but my use case requires the JSON object.

Resources (screenshots, code snippets etc.)

This is the template code for the dynamic menu

<ng-template #LinkGroupArrayRenderer let-groups>
    <ng-container *ngFor="let group of groups">
        <ul>
            <mdb-accordion>
                <ng-container *ngTemplateOutlet="
                    LinkGroupRenderer; 
                    context: {$implicit: group}"
                ></ng-container>
            </mdb-accordion>
        </ul>
     </ng-container>
 </ng-template>

 <ng-template #LinkGroupRenderer let-group>
     <mdb-accordion-item [customClass]="'ml-2'">
         <mdb-accordion-item-head>
             {{group.Heading}}
         </mdb-accordion-item-head>
         <mdb-accordion-item-body>
             <ng-container *ngIf="group.Subgroups && group.Subgroups.length">
                 <ng-container *ngTemplateOutlet="
                     LinkGroupArrayRenderer; 
                     context: {$implicit: group.Subgroups}">
                  </ng-container>
              </ng-container>
          <ng-container *ngFor="let link of group.Links">
               <li>
                   <a [href]="link.href" [title]="link.title">
                       {{link.title}}
                   </a>
               </li>
         </ng-container>
      </mdb-accordion-item-body>
   </mdb-accordion-item>
</ng-template>

This is the example JSON object:

export let clubLinks: LinkGroup = {
    Subgroups: [
        {
            Heading: 'Example Subsection',
            Links: [
                {
                    title: 'Example Link 1',
                    href: '#'
                },
                {
                    title: 'Example Link 2',
                    href: '#'
                }
            ]
        },
    ],
    Links: [
        {
            title: 'Example Link 3',
            href: '#'
        },
        {
            title: 'Example Link 4',
            href: '#'
        }
    ]
};

And finally, here is the code that works when I ran through the template logic by hand

    <mdb-accordion-item [customClass]="'ml-2'">
    <mdb-accordion-item-head>
        BLANK
    </mdb-accordion-item-head>
    <mdb-accordion-item-body>
        <ul>
            <mdb-accordion>
                <mdb-accordion-item [customClass]="'ml-2'">
                    <mdb-accordion-item-head>
                        Example Subsection
                    </mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                        <li><a [href]="#" [title]="Example Link 1">{{Example link 1}}</a></li>
                        <li><a [href]="#" [title]="Example Link 2">{{Example link 2}}</a></li>
                    </mdb-accordion-item-body>
                </mdb-accordion-item>
            </mdb-accordion>
        </ul>
        <li><a [href]="#" [title]="Example Link 3">{{Example link 3}}</a></li>
        <li><a [href]="#" [title]="Example Link 4">{{Example link 4}}</a></li>
    </mdb-accordion-item-body>
</mdb-accordion-item>