LPX-toolbar menu add or remove item. #7317

• ABP Framework version: v8.0.2
• UI Type: Angular
• Database System: EF Core (MySQL)
• Tiered (for MVC) or Auth Server Separated (for Angular): no
• Exception message and full stack trace: Cannot add/remove values in data.user?.userActionGroups in the following toolbar. How to remove/add new values in the following setup? Could you please help with this situation? I am using Context Menu Component from LeptonX.
• Steps to reproduce the issue: These are the files: Toolbar-container.component.html

<lpx-toolbar [profileRef]="profileRef$" (profileClick)="toggleCtxMenu()"> <ng-container *ngIf="{ user: userProfileService.user$ | async, profileRef: profileRef$ | async } as data" > <lpx-context-menu *ngIf="data.profileRef" #menu="lpx-context-menu" (lpxClickOutside)="menu.close()" [exceptedRefs]="[data.profileRef]" > <ng-container *ngFor="let actions of data.user?.userActionGroups;~~~~"> <lpx-context-menu-action-group> <lpx-navbar-routes [navbarItems]="actions" [routerItem]="false" ></lpx-navbar-routes> </lpx-context-menu-action-group> </ng-container> </lpx-context-menu> </ng-container> </lpx-toolbar>

Toolbar-container.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core'; import { ReplaySubject } from 'rxjs'; import { ContextMenuComponent } from '@volosoft/ngx-lepton-x'; import { UserProfileService, ToolbarService } from '@volo/ngx-lepton-x.core'; import { ToolbarTranslateKeys } from './enums'; @Component({ selector: 'app-pm-toolbar-container', templateUrl: './toolbar-container.component.html', }) export class ToolbarContainerComponent { @ViewChild(ContextMenuComponent, { static: false }) ctxMenu!: ContextMenuComponent; profileRef$ = new ReplaySubject<ElementRef>(1); welcomeText = ToolbarTranslateKeys.ContextMenuWelcome; constructor( public toolbarService: ToolbarService, public userProfileService: UserProfileService ) {} toggleCtxMenu(): void { this.ctxMenu.toggle(); } }

toolbar-container.module.ts

import { ModuleWithProviders, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LPX_TRANSLATE_TOKEN, LpxAvatarModule, LpxClickOutsideModule, LpxNavbarModule, LpxTranslateModule, } from '@volo/ngx-lepton-x.core'; import { LpxContextMenuModule } from '@volosoft/ngx-lepton-x'; import { LpxToolbarModule } from '@volosoft/ngx-lepton-x/layouts'; import { ToolbarContainerComponent } from './toolbar-container.component'; import { ToolbarTranslateDefaults } from './enums'; @NgModule({ declarations: [ToolbarContainerComponent], imports: [ CommonModule, LpxContextMenuModule, LpxClickOutsideModule, LpxAvatarModule, LpxNavbarModule, LpxToolbarModule, LpxTranslateModule, ], exports: [ToolbarContainerComponent], }) export class LpxToolbarContainerModule { static forRoot(): ModuleWithProviders<LpxToolbarContainerModule> { return { ngModule: LpxToolbarContainerModule, providers: [ { provide: LPX_TRANSLATE_TOKEN, useValue: [ToolbarTranslateDefaults], multi: true, }, ], }; } }