Accessing Individual Menu Components

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
mangelo
Posts: 28
Joined: 17 May 2013, 17:23

25 Jun 2020, 16:52

I can appreciate how the template makes it easy to add menu items, but it is not conducive to controlling menu state. If I need to hide some menu items pertaining to login status or disabling others for the purpose of permissions. I cannot do so with the way the template builds in the menu. There is no way to obtain the individual MenuItem instance from the current approach.

Is there a way to do so? This is what i am trying thus for. I can do what I need, but this takes away from the ease of building the menu the way that the template does and it does not follow the style.

Code: Select all

export class AppMenuComponent implements OnInit {

    model: MenuItem[];
    loggedIn = false;

    loginMenuItem: MenuItem = { label: 'Login', icon: 'ui-icon-verified-user', routerLink: ['/login'] };
    logoutMenuItem: MenuItem = { label: 'Logout', icon: 'ui-icon-cancel', routerLink: ['/logout'] };
    artistMenuItem: MenuItem = { label: 'Artists', icon: 'ui-icon-group', routerLink: ['/artists'] };
    songsMenuItem: MenuItem = { label: 'Songs', icon: 'ui-icon-library-music', routerLink: ['/songs'] };
    setListMenuItem: MenuItem = { label: 'Set Lists', icon: 'ui-icon-library-books', routerLink: ['/set-lists'] };
    gigsMenuItem: MenuItem = { label: 'Gigs', icon: 'ui-icon-event-note', routerLink: ['/gigs'] };
    signUpMenuItem: MenuItem = { label: 'Sign Up', icon: 'ui-icon-group-add', routerLink: ['/sign-up'] };

    mainMenuItems = [this.artistMenuItem, this.songsMenuItem, this.setListMenuItem, this.gigsMenuItem];

    constructor(
        public app: AppMainComponent,
        private loginService: LoginService,
        private menuService: MenuService) {}

    ngOnInit() {

        this.loginMenuItem.visible = !this.loginService.isLoggedIn();
        this.logoutMenuItem.visible = this.loginService.isLoggedIn();

        this.mainMenuItems.forEach ( (menuItem: MenuItem) => {
                menuItem.visible = this.loginService.isLoggedIn();
            }
        );

        this.loginService.loggedInStatus$.subscribe(
            (isLoggedIn: boolean) => {
                this.loggedIn = isLoggedIn;
                this.loginMenuItem.visible = !isLoggedIn;
                this.logoutMenuItem.visible = isLoggedIn;

                this.mainMenuItems.forEach ( (menuItem: MenuItem) => {
                    menuItem.visible = isLoggedIn;
                });
            }
        );

        this.model = [
            {label: 'Dashboard', icon: 'dashboard', routerLink: ['/',], routerLinkActiveOptions: {exact: true} },
            this.artistMenuItem,
            this.songsMenuItem,
            this.setListMenuItem,
            this.gigsMenuItem,
            this.signUpMenuItem,
            this.loginMenuItem,
            this.logoutMenuItem,
            {
                label: 'Components', icon: 'list', // routerLink: ['/components'],
                items: [
                    {label: 'Sample Page', icon: 'desktop_mac', routerLink: ['/components/sample']},
                    {label: 'Forms', icon: 'input', routerLink: ['/components/forms']},
                    {label: 'Data', icon: 'grid_on', routerLink: ['/components/data']},
                    {label: 'Panels', icon: 'content_paste', routerLink: ['/components/panels']},
                    {label: 'Overlays', icon: 'content_copy', routerLink: ['/components/overlays']},
                    {label: 'Menus', icon: 'menu', routerLink: ['/components/menus']},
                    {label: 'Messages', icon: 'message', routerLink: ['/components/messages']},
                    {label: 'Charts', icon: 'insert_chart', routerLink: ['/components/charts']},
                    {label: 'File', icon: 'attach_file', routerLink: ['/components/file']},
                    {label: 'Misc', icon: 'toys', routerLink: ['/components/misc']}
                ]
            },
...
PrimeNG 13.4.0
Spring Boot 2.7.0

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

09 Oct 2020, 13:26

Maybe, you can create a json data and then add an option like 'visible' to any items. Then, you can check this option before rendering menuitem.

Best Regards,

Post Reply

Return to “Sapphire - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests