Angular11 how to show only one of multiple primeng context menu

Question

I am developing Angular application where i have a button inside forloop on click open a context menu. I only want only one menu to be opened. currently multiple menus are left opened.

<div *ngFor="let i of items">

<p-contextMenu
    [global]="false"
    #cm
    [model]="contextMenuOptions"
    appendTo="body"
    name="contextMenu"
>
</p-contextMenu>

            <button
                class="icon-button"
                type="button"
                (contextmenu)="openCm($event, cm)"
                (click)="openCm($event, cm)"
                (keyup.enter)="openCm($event, cm)"
            >
                <i class="far fa-ellipsis-v"></i>
            </button>
</div>

openCm(event, cm) {
    event.preventDefault();
    event.stopPropagation();
    cm.show(event);
    return false;
}

Answer 1

put your context menu outside the loop and call the function that calls it inside the button that will work. it happens that by being inside the loop it is creating a context for each row of your table