ng-template中的材料菜单不起作用

Question

<span *ngIf="!slot.teiletyp.finished; else finishedPart" mat-line>
                Charge: {{ queue.box.batch_number }}
                </span>
                <ng-template #finishedPart>
                        <span mat-line >Fertigteilbox</span>
                        <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="boxClicked(queue.box)">boxdetail</button>
                        <button mat-menu-item (click)="openBoxes(queue.box.id)">offenebox</button>
                        </mat-menu>
                </ng-template>

here i am trying to open a menu in the else part but i am unable to doso. can someone help me with this.

Thank you

Answer 1

The menu is not opened by default. You have to add a menu trigger in order to open the menu. In your case, a better solution would be to just use mat-button in your template.

<span *ngIf="!slot.teiletyp.finished; else finishedPart" mat-line>
  Charge: {{ queue.box.batch_number }}
</span>
<ng-template #finishedPart>
    <span mat-line>Fertigteilbox</span>
    <div>
        <button mat-button [ngStyle]="{'width':'100%'}" (click)="boxClicked(queue.box)">boxdetail</button>
        <mat-divider></mat-divider>
        <button mat-button [ngStyle]="{'width':'100%'}" (click)="openBoxes(queue.box.id)">offenebox</button>
    </div>
</ng-template>