Collapse function for metismenu with ng-bootstrap

Question

I am using metismenu and ng-bootstrap with Angular 4. The issue i am facing are the aria-expanded not setting properly.

The following are my code in Angular.

<ul class="nav metismenu" id="side-menu">
<ng-template [ngIf]="user.haveAccess('menu1')">
    <li [ngClass]="{'active': !isCollapsed}">
        <a (click)="onCollapsed()" [attr.aria-expanded]="!isCollapsed">Menu1</a>
        <ul class="nav nav-second-level" [ngbCollapse]="isCollapsed" [attr.aria-expanded]="!isCollapsed">
            <li><a href="#">SubMenu1</a></li>
            <li><a href="#">SubMenu2</a></li>
            <li><a href="#">SubMenu3</a></li>
        </ul>
    </li>
</ng-template>
</ul>

The following are the html when the page is loaded at the first time, as expect.

<ul class="nav metismenu" id="side-menu">
<li _ngcontent-c2="" ng-reflect-ng-class="[object Object]">
    <a _ngcontent-c2="" aria-expanded="false">Menu1</a>
    <ul _ngcontent-c2="" class="nav nav-second-level collapse" ng-reflect-collapsed="true" aria-expanded="false">
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu1</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu2</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu3</a></li>
    </ul>
</li>
</ul>

But when i click on the Menu1, the menu is expanded. The page become like following. Why the <a _ngcontent-c2="" aria-expanded="false">Menu1</a> did change to true?

<ul class="nav metismenu" id="side-menu">
<li _ngcontent-c2="" ng-reflect-ng-class="[object Object]" class="active">
    <a _ngcontent-c2="" aria-expanded="false">Menu1</a>
    <ul _ngcontent-c2="" class="nav nav-second-level collapse show" ng-reflect-collapsed="false" aria-expanded="true">
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu1</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu2</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu3</a></li>
    </ul>
</li>
</ul>

I feel like the metismenu and ng-bootstrap trying to update the aria-expanded at the same time. Is this the issue in metismenu or anything i have missed in my code?

Please see below screenshot

When page loaded.

When 1st click on Menu1, menu expanded but the aria-expanded didn't change to true <a _ngcontent-c2="" aria-expanded="false">Menu1</a>.

When 2nd click on Menu1, menu collapse and expanded very fast.

When 3rd click on Menu1, menu not able collapse but css is collapsed.