Build Nested Angular Material MatMenu with *ngFor got errors

Question

I try to build nested(two levels) MatMenu in angular material components, but when I run it in browser, errors occurred.

component.html:

<!-- header -->
<div class="header">
    <!-- nav -->
    <div class="nav">
        <ng-container *ngFor="let navMenu of navMenus">
            <button mat-button [matMenuTriggerFor]="btnMenu">{{ navMenu.name }}</button>
            <mat-menu #btnMenu="matMenu">
                <ng-container *ngFor="let menu of navMenu.menus">
                    <ng-container *ngIf="!menu.children">
                        <a mat-button mat-menu-item href="{{ menu.url }}" target="_blank">{{ menu.name }}</a>
                    </ng-container>
                    <ng-container *ngIf="menu.children">
                        <button mat-button *ngIf="menu.children" [matMenuTriggerFor]="parentMenu"
                            mat-menu-item>{{ menu.name }}</button>
                        <mat-menu #parentMenu="matMenu">
                            <ng-container *ngFor="let child of menu.children">
                                <a mat-button mat-menu-item href="{{ child.url }}" target="_blank">{{ child.name }}</a>
                            </ng-container>
                        </mat-menu>
                    </ng-container>
                </ng-container>
            </mat-menu>
        </ng-container>
    </div>
</div>

question from:https://stackoverflow.com/questions/65626209/build-nested-angular-material-matmenu-with-ngfor-got-errors

Answer 1

Waitting for answers