title: Angular2. How to hide(no-render) the link in the menu after check access?
body: <p>Need to hide link in menu based on the <strong>"routerLink"</strong> after check ACL access. I do not want to use angular directives <strong>"*ngIf"</strong> on each element link in app (need to do that globaly on the routerConfig definition)</p>
  
  <p><em>Content can controll using annotation <strong>@CanActivate</strong> on components but need to hide link in menu</em></p>
  
  <p>I try do that with overwrite <strong>"routerLink"</strong> directive, but in this directives after overwrite can't get access to my extends param defined(resources and privilages) in routerConfig </p>
  
  <p><strong>Example:</strong></p>
  
  <pre><code>@Component({})
  @RouteConfig([{   
      path: '/dashboard', 
      name: 'Dashboard', 
      component: DashboardComponent, 
      data: {'resource':'account', 'privilage':'show'} 
  }])
  </code></pre>
  
  <p>But can't get access to this config data(routerData) in the "routerLink".</p>
  
  <p>Some idea how can do that?</p>
  
  <p><strong>Second version</strong></p>
  
  <p>Multi level menu and stiil have problem with get access to the (extend data config) from routerConfig definition.</p>
  
  <p>Main component</p>
  
  <pre><code>@RouteConfig([
      { path:'/dashboard',   name: 'DashboardLink',   component: DashboardComponent,  data: { res: 'dasboard', priv: 'show'}, useAsDefault: true },
      { path:'/user/...',    name: 'UserLink',        component: UserComponent,       data: { res: 'user', priv: 'show'} },
   ])
  
  @Component({
      selector: 'main-app',
      template: `
              &lt;ul class="left-menu"&gt;
                  &lt;li&gt;&lt;a secured [routerLink]="['UserLink']"&gt;User&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a secured [routerLink]="['ProfileLink']"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a secured [routerLink]="['HomeLink']"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a secured [routerLink]="['DashboardLink']"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `
  })
  export class MainComponent {
  
  }
  </code></pre>
  
  <p>User component</p>
  
  <pre><code>@RouteConfig([
      { path: '/profile', name: 'ProfileLink', component: ProfileComponent, data: {res: 'user', priv: 'details'} },
  ])
  @Component({ ... })
  export class UserComponent {
  }
  </code></pre>
  
  <p>Profile component</p>
  
  <pre><code>@Component({ ... })
  export class ProfileComponent {
  
  }
  </code></pre>
  
  <p>My secure directives</p>
  
  <pre><code>@Directive({
      selector: '[secured]'
  })
  export class SecuredDirective {
  
      @Input('routerLink')
      routeParams: any[];
  
      /**
       * 
       */
      constructor(private _viewContainer: ViewContainerRef, private _elementRef: ElementRef, private router:Router) {
      }
  
      ngAfterViewInit(){
          //Get access to the directives element router instructions (with parent instructions)
          let instruction = this.router.generate(this.routeParams);
              //Find last child element od instruction - I thing thats my component but I am not sure (work good with two levels of menu)
              this.getRouterChild(instruction);
      }
  
      private getRouterChild(obj: any){
          var obj1 = obj;
          while(true) {
              if( typeof obj1.child !== 'undefined' &amp;&amp; obj1.child !== null ){
                  obj1 = obj1.child;
              } else {
                  break;
              }  
          }
          this.checkResPrivAcl(obj1.component.routeData.data)
      }
      private checkResPrivAcl(aclResAndPriv: any){
  
          let hasAccess = CommonAclService.getInstance().hasAccess(aclResAndPriv['res'], aclResAndPriv['priv']);
  
          if (!hasAccess) {
              let el : HTMLElement = this._elementRef.nativeElement;
              el.parentNode.removeChild(el);   
          }
  
          console.log("CHECK ACL: " + aclResAndPriv['res'] + " | " + aclResAndPriv['priv']);
      }
  }
  </code></pre>
  
  <p>This solution work only for child item of menu don't work with the main level of menu, and not sure is this work correctly on the multi level menu.</p>
  
  <p>I try diffrent way to resolve this problem I try get access to the RouterConfig definition (and my routerData extend config) in the directives and check element by the alias name of link using <strong>@Input('routerLink')</strong> but don't find how can I get access to the RouterConfig.</p>