'How to prevent PrimeNG TieredMenu from disappearing on click?

I have this menu:

enter image description here

And I want it to stay open when I click on the "Open" option. I have tried to capture the event in the corresponding command, but it didn't work:

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-selection-menu',
  template: ` <p-tieredMenu #menu [model]="items" [popup]="true"></p-tieredMenu>
    <button
      #btn
      type="button"
      pButton
      icon="pi pi-fw pi-list"
      label="Show"
      (click)="menu.toggle($event)"
    ></button>`,
  styles: [],
})
export class SelectionMenuComponent implements OnInit {
  items: MenuItem[] = [];

  constructor() {}

  ngOnInit() {
    this.items = [
      {
        label: 'File',
        items: [
          {
            label: 'New',
            icon: 'pi pi-fw pi-plus',
            items: [{ label: 'Project' }, { label: 'Other' }],
          },
          {
            label: 'Open',
            command: (e) => {    // <-- Here
              console.log(e);
              e.originalEvent.stopPropagation();
            }
          },
          { label: 'Quit' },
        ],
      },
      {
        label: 'Edit',
        icon: 'pi pi-fw pi-pencil',
        items: [
          { label: 'Delete', icon: 'pi pi-fw pi-trash' },
          { label: 'Refresh', icon: 'pi pi-fw pi-refresh' },
        ],
      },
    ];
  }
}

How can I keep the menu open and control when to close it programmatically?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source