i have a navbar component with an app sidebar with navItems attribute on my angular project.

here is how my navBar content is :

<app-sidebar [fixed]="true" [display]="'lg'"  style="background-color : #e65100;">
    <ng-scrollbar>
      <app-sidebar-nav [navItems]="navItems"></app-sidebar-nav>
    </ng-scrollbar>
    <app-sidebar-minimizer></app-sidebar-minimizer>
  </app-sidebar>

and here is how my navItems value is composed

export const navItems = [
  {
    name: 'Tableau de bord',
    url: '/dashboard',
    icon: 'icon-speedometer',
  },
  {
    title: true,
    name: 'Projets BBI',
  },
  {
    name: 'Projects',
    url: '/projects',
    icon: 'icon-speedometer',
  },
  {
    name: 'Selections',
    url: '/selections',
    icon: 'icon-envelope',
  },
  {
    name: 'Commercial Launching',
    url: '/commercial-launching',
    icon: 'icon-exclamation',
  },
  {
    title: true,
    name: 'Gestion Admin',
  },
  {
    name: 'Users',
    url: '/users',
    icon: 'icon-user',
  },
  {
    name: 'Applications',
    url: '/applications',
    icon: 'icon-screen-smartphone',
  },
  {
    name: 'Currencies',
    url: '/currencies',
    icon: 'icon-bills',
  },
  {
    name: 'Countries',
    url: '/countries',
    icon: 'icon-globe',
  },
  {
    name: 'Internal Clients',
    url: '/internalClients',
    icon: 'icon-wallet',
  },
  {
    name: 'Business Lines',
    url: '/businesslines',
    icon: 'icon-screen-desktop',
  },
  {
    name: 'Products',
    url: '/products',
    icon: 'icon-tag',
  },
  {
    name: 'Languages',
    url: '/languages',
    icon: 'icon-pencil',
  },
  {
    name: 'Roles',
    url: '/roles',
    icon: 'icon-eye',
  },
  {
    name: 'Tenders',
    url: '/tenders',
    icon: 'icon-briefcase',
  },
  {
    name: 'Unity Significative',
    url: '/unitySignificatives',
    icon: 'icon-star',
  },
  {
    title: true,
    name: 'Administration',
  },
  {
    name: 'Configuration',
    url: '/base',
    icon: 'icon-settings',
  },
  {
    name: 'Droits',
    url: '/buttons',
    icon: 'icon-shield',
  },
];

So i would like to iterate over each item of my navItems and to add for each item an attribute hidden with the value 'false',

i've tried to make it like that for now:

public hideNav($event) {
    if (this.currentUser) {
      for(const anItem in navItems) {
        console.log("****************************" navItems[anItem].name);
    
        //navItems.push({"hidden": Boolean}); // that doesn't work with push btw 
        console.log("****************************" navItems[anItem].name);

      }
    }
  }

when i try to change the current Item, i don't know how to add an attribute to the current item

My idea is then to pass in parameters the role of the current user and if it is equal to "admin", the management part of the navBar would be hidden from the user.

CodePudding user response：

Try using a for of loop and string literal to add the hidden property for each item

public hideNav($event) {
    for(const anItem of navItems) {
      anItem['hidden'] = false
    }
}

P.S. you should add a default hidden value even if it is null so that you can use the dot operator anItem.hidden instead of anItem['hidden']

CodePudding user response：

Try this way...

navItems.map(function(entry) {
    entry.hidden = false;
    return entry;
});

Sample:

const navItems = [
  {
    name: 'Tableau de bord',
    url: '/dashboard',
    icon: 'icon-speedometer',
  },
  {
    title: true,
    name: 'Projets BBI',
  },
  {
    name: 'Projects',
    url: '/projects',
    icon: 'icon-speedometer',
  }      
];

navItems.map(function(entry) {
    entry.hidden = false;
    return entry;
});

console.log(navItems)