PrimeNg Menubar not rerendering after changes to Model

Question

i followed the example as provided under https://www.primefaces.org/primeng/menubar and created a simple menubar with a few MenuItems. Now i want to change the visibility of one Item after the menu was rendered.

I Simply change the visible property of the item like this:

this.items[1].visible = false;

unfortunately the menubar does not rerender and the menuitem is still shown. Only when i move the mouse over one of the rendered Menuitems the whole menubar is rerendered and the Menuitem dissappears.

The behevior can be seen in this stackblitz: https://stackblitz.com/edit/primeng-menubar-demo-8t1apq?file=src/app/app.component.ts After loading, there is a SetTimeout which sets one menuitem visibility to false, but the item only dissappears after moving the mouse over the menu.

Why is this happening? Is there a better way to update the ItemMenu model?

thanks

Answer 1

This is working in early tests. I have derived it from a solution on How to programmatically trigger refresh primeNG datatable when a button is clicked to use with a menu

HTML

<div class="content-section implementation">
    <div class="card">
        <p-panelMenu [model]="items" [style]="{'width':'300px'}" [multiple]="false" *ngIf="visible"></p-panelMenu>
    </div>
</div>

TS

visible: boolean = true;


      updateVisibility(): void {
         this.visible = false;
         setTimeout(() => this.visible = true, 0);
       }


    constructor(private _authService: AuthService){
      this._authService.loginChanged
      .subscribe(userAuthenticated => {
        this.userAuthenticated = userAuthenticated;
        if (userAuthenticated)
        {
         this.items[1].visible = false;
         this.items[2].visible = true;
         this.updateVisibility();
        }
        else        {
         this.items[1].visible = true;
         this.items[2].visible = false;
         this.updateVisibility();
        }

      })

    }