Opened mat-menu items should be close after other mat-menu items clicked (i.e should be act as an mat-tab)

Opened mat-menu items should be closed when other mat-menu items clicked ... And i tried Mat-trigger methods but no use in that

Here is the code

In that I used an reusable component to trigger data of mat-menu items through @Input and I need an functionality like as mat-tab methods for these code . When I use trigger method trigger.toArray().forEach its not looped to another items its looped for once only,So I cant set that correctly

<ng-container *ngIf="!child">
    <div
        class="sample"
        [matMenuTriggerFor]="matMenu"
        [matMenuTriggerData]="item"
        #trigger="matMenuTrigger" >
        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
    </div>
</ng-container>


<mat-menu  backdropClass="custom__menu"  
    [overlapTrigger]="false"
    #matMenu="matMenu" xPosition="before" >

    <ng-container *ngFor="let item of item.children;">

       
        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">

            <!-- Basic -->
            <ng-container *ngIf="item.type === 'basic'" >
                <div
                   
                    [disabled]="item.disabled"
                    mat-menu-item>
                    <horizontal-navigation-basic-item 
                        [item]="item"
                        [name]="name"></horizontal-navigation-basic-item>
                </div>
            </ng-container>

        </ng-container>

    </ng-container>

</mat-menu>

<ng-template
    let-item
    #itemTemplate>

    <div
       (click)="triggerChangeDetection(item)"

     </div>


 </ng-template>