How can I use *ngIf on primeng menubar? I am trying to use it when displaying login and logout based on authentication

Question

We have only one p-menubar tag while using primeng menubar. Everything is in ts file. How can I use *ngIf or *ngswitch on a certain item.

<p-menubar [model]="items">

onAuthStateChanged(auth, (User)=>{
  this.show= !this.show
  this.user=JSON.parse(JSON.stringify(User)).displayName 
})
 



this.items = [
  {
    label: 'Home',
    icon: 'pi pi-fw pi-home',
    routerLink: '/'
  },
  {
    label: 'Shopping Cart',
    icon: 'pi pi-fw pi-shopping-cart',
    routerLink: 'shopping-kart'
  },
  {
    label: 'Login',
    icon: 'pi pi-fw pi-sign-in',
    routerLink: 'login',
    visible : this.show,
  },
  {
    label: 'User Name',
    icon: 'pi pi-fw pi-user',
    items: [
      { label: 'My Orders', icon: 'pi pi-fw pi-shopping-bag', routerLink: 'my-orders' },
      { label: 'Manage Orders', icon: 'pi pi-fw pi-sync', routerLink:'admin/orders' },
      { label: 'Manage Products',icon:'pi pi-fw pi-tags', routerLink:'admin/products' },
      {label : 'Logout' , icon :'pi pi-fw pi-sign-out', command: () =>this.logOut()}
    ]
  }
];

Answer 1

The MenuItem class has an attribute named : 'visible'. you can use your conditions on it in the ts file.

yourMenuItems: MenuItem[] = [
    {
      label: 'demo label',
      command: (): void => yourFunction(),
      visible: booleanBasedOnLoginStatus 
    },]