Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

197
Views
Angular 2 - how to get tag attributes in ngIf function

given such a template

<a *ngIf="canAccess()" routerLink="/adminUsers">...</a>
<a *ngIf="canAccess()" routerLink="/link2">...</a>
<a *ngIf="canAccess()" routerLink="/otherlink">...</a>
<a *ngIf="canAccess()" routerLink="/somthingelse">...</a>

and a function:

canAccess()
{
    ...

how do I get

  • the router link
  • any other tag attribute inside that function

thanks

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Update your template

   <a *ngIf="canAccess($event)" routerLink="/adminUsers">...</a>

and your component

 canAccess(event){

    console.log(event.currentTarget);
    console.log(event.currentTarget.getAttribute("routerlink"));
    ..
    }
over 4 years ago · Santiago Trujillo Report

0

You might need:

  • Location to get the current URL.
  • UrlSegment if you want to check URL parameters.

Put the ones you need into the constructor and call their methods in your canAccess().

In addition you could protect your route (from routerLink) itself with a Guard.

over 4 years ago · Santiago Trujillo Report

0

My solution was to create a directive and it's associated component, so I just give it the module the user wants to access

that directive asks a service if user is logged and can access that link

if yes, the link is remplaced with the component

here is an exemple on how to insert component dynamicaly (not containing the authorization part)

import { Directive, Input, ComponentFactoryResolver,ViewContainerRef } from '@angular/core';
import { MenuItemComponent } from './menuItem.component';

@Directive({ selector: '[menuItem]' })
export class MenuItemDirective {

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private viewContainer: ViewContainerRef) {}

    @Input() set menuItem(_link: string) {
        if(some sort of condition depending on a auth service)
        {
            const factory = this.componentFactoryResolver.resolveComponentFactory(MenuItemComponent);
            const menuItemComponentRef = this.viewContainer.createComponent(factory);
            menuItemComponentRef.changeDetectorRef.detectChanges();
        }
        else
            this.viewContainer.clear();
  }
}

might be overkill, but in the end I use

<a *menuItem="dashBoard"></a>

instead of

<a class="menuItemA menuRouterLinkA" routerLink="/dashBoard" routerLinkActive="menuCurrentLinkA" >{{ "DashBoard" }}</a>

and it deals with features/page/modules.. access authorisation :-)

yay

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!