title: Role Based Navigation Items
body: <p>I'm learning to develop in .NET and Angular and have run into a brick wall when it comes to role based menu items. I have routing setup and active, and users trying to access areas their role does not provide access to are blocked from entering.  This all works.  The issue I'm having is ensuring they don't see the nav links for those areas that they don't have access too.  (If it helps at all, I'm using the CoreUI admin theme as the base for this).</p>
  
  <p>My project has 4 roles:</p>
  
  <ul>
  <li>GlobalAdmin </li>
  <li>ClientAdmin  </li>
  <li>LocationAdmin</li>
  <li>ReportsOnly</li>
  </ul>
  
  <p>Access is controlled by Core Identity in the .NET application. On the angular side of things I was setting up a role directive used to control the viewing of the nav links using this directive and adding *appHasRole="['GlobalAdmin']" for whichever role was required.  This doesn't work though as my sidebar builds my links by grabbing them from the _nav.ts file.  </p>
  
  <p>Is anyone able to help me out with adding this functionality?  I've even tried using seperate _nav files for each role which I know isnt optimal, and quickly discovered if someone has more than one role, both nav bars are displayed.  </p>
  
  <p>This is how my nav system is currently built.  </p>
  
  <p>_nav.ts (Note, its the Management and its Children that require the GlobalAdmin role, and the Inspections requires the LocationsAdmin role for examples). </p>
  
  <pre><code>import { INavData } from '@coreui/angular';
  
  export const navItems: INavData[] = [
    {
      name: 'Dashboard',
      url: '/dashboard',
      icon: 'icon-speedometer',
      badge: {
        variant: 'info',
        text: 'NEW'
      }
    },
    {
      title: true,
      name: 'Licensing'
    },
    {
      name: 'Manage',
      url: '/manage',
      icon: 'icon-settings',
      children: [
        {
          name: 'Register',
          url: '/manage/register',
          icon: 'icon-star'
        },
        {
          name: 'Clients',
          url: '/manage/clients',
          icon: 'icon-user'
        },
        {
          name: 'Locations',
          url: '/manage/locations',
          icon: 'icon-location-pin'
        }
      ]
    },
    {
      title: true,
      name: 'Site Management'
    },
    {
    name: 'Inspections',
      url: '/inspections',
      icon: 'icon-magnifying-glass',
      children: [
        {
          name: 'Setup',
          url: '/inspections/setup',
          icon: 'icon-cursor'
        },
        {
          name: 'Reports',
          url: '/inspections/reports',
          icon: 'icon-cursor'
        }
      ]
    }
  </code></pre>
  
  <p>default-layout component that displays the SPA and contains the sidebar:</p>
  
  <pre><code>  &lt;app-sidebar #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized" (minimizedChange)="toggleMinimize($event)"&gt;
      &lt;app-sidebar-nav [navItems]="navItems" *appHasRole="['GlobalAdmin']" [perfectScrollbar] [disabled]="appSidebar.minimized"&gt;&lt;/app-sidebar-nav&gt;
      &lt;app-sidebar-minimizer&gt;&lt;/app-sidebar-minimizer&gt;
    &lt;/app-sidebar&gt;
  </code></pre>
  
  <p>.NET API startup.cs file containing the role policy:</p>
  
  <pre><code>services.AddAuthorization(options =&gt;
              {
                  options.AddPolicy("RequireGlobalAdminRole", policy =&gt; policy.RequireRole("GlobalAdmin"));
                  options.AddPolicy("RequireClientAdminRole", policy =&gt; policy.RequireRole("GlobalAdmin", "ClientAdmin"));
                  options.AddPolicy("RequireLocationAdminRole", policy =&gt; policy.RequireRole("GlobalAdmin", "ClientAdmin", "LocationAdmin"));
                  options.AddPolicy("RequireReportsOnlyRole", policy =&gt; policy.RequireRole("GlobalAdmin", "ClientAdmin", "LocationAdmin", "ReportsOnly"));
              });
  </code></pre>
  
  <p>Any assistance on this would be GREATLY appreciated.  I've been pulling my hair out on this for 4 days now trying to figure out a way. </p>
  
  <p>Edit: app-sidebar-nav.d.ts</p>
  
  <pre><code>import { OnChanges, SimpleChanges } from '@angular/core';
  import { Router } from '@angular/router';
  import { INavData } from './app-sidebar-nav';
  import * as ɵngcc0 from '@angular/core';
  export declare class AppSidebarNavComponent implements OnChanges {
      router: Router;
      navItems: INavData[];
      _sidebarBav: boolean;
      role: string;
      navItemsArray: INavData[];
      constructor(router: Router);
      ngOnChanges(changes: SimpleChanges): void;
      static ɵfac: ɵngcc0.ɵɵFactoryDef&lt;AppSidebarNavComponent&gt;;
      static ɵcmp: ɵngcc0.ɵɵComponentDefWithMeta&lt;AppSidebarNavComponent, 
  "app-sidebar-nav, cui-sidebar-nav", never, { 'navItems': "navItems", 
  'role': "role" }, {}, never&gt;;
  }
  
  //# sourceMappingURL=app-sidebar-nav.component.d.ts.map
  </code></pre>