Angular material mat-menu replicating inner component several times

0
votes

I have an Angular 6 app using angular material, on which I have a mat-menu containing a component (app-login):

<button [matMenuTriggerFor]="menu" mat-icon-button>
  <mat-icon>person</mat-icon>
</button>
<div MatMenuPanel>
  <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <ng-template matMenuContent>
      <app-login></app-login>
    </ng-template>
  </mat-menu>
</div>

The issue is that if I click several times on the trigger button, app-login is being rendered/appended several times, so I end up with a menu with app-login repeated several times.

1
angularangular-materialangular-material-6

1 Answers

0
votes

Not sure what the cause of the issue was, but I've upgraded both @angular/material and @angular/cdk from version 6.0.1 to 6.4.7 and the issue is now solved.