Show menu items based on query params using angular 4

Question

I am working on the role based menu to show the menu items based on the query string. Like when the url is of the form http://www.something.com/something?type=admin then i have to show the menu items of Admins only. But my logic is hiding all the menu items. for that i have implemented the logic as in my header.component.ts

ngOnInit() {
    this.route.queryParams
    .filter(params => params.type)
    .subscribe(params => {
        console.log(params); //{type: "admin"}
        this.type = params.type;
        console.log(this.type);

        if(this.type == "admin"){
            console.log("ADMIN PAGE");                
                //this.router.navigate(['dashboard'], { queryParams: { type: this.type } });
                //this.router.navigate(['dashboard']);
        }else if(this.type == "national"){
            console.log("NATIONAL PAGE");
        }else if(this.type == "warrington"){
            console.log("WARRINGTON PAGE");
        }else if(this.type == "subcontractorAdmin"){
            console.log("SUB CONTRACOTR ADMIN PAGE");
        }else if(this.type == "subcontractorManager"){
            console.log("SUB CONTRACTOR MANAGER PAGE");
        }else{
            console.log("OTHERS PAGE");
        }
    });
  }

When i use the logic then its working fine as expected. But what happens is when i try to show and hide the menu items based on the *ngIf="type=admin" then all the menu items are getting hidden. See below my template code.

header.component.html

<ul class="nav navbar-nav">
              <li routerLinkActive="active" *ngIf="'type' == 'admin';">
                <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/dashboard','_self')">Dashboard</a>
              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin';">
                  <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/supplier-list','_self')">Suppliers</a>
              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin';">
                  <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/compliance-supplier-list','_self')">Compliance</a>
              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin';">
                  <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/admin-invoice-list','_self')">Invoicing</a>
              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin';">
                  <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/internal-user-list','_self')">User Management</a>

              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin';">
                  <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/node/add/upload_weight_csv','_self')">Weight Ticket</a>

              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin';">
                <a routerLink="/searchsupplier">Search</a>
              </li>
            </ul>

Can anybody help me why all the menu items are hiding.

Answer 1

I think you should change the line

 <li routerLinkActive="active" *ngIf="'type' == 'admin';">

to

 <li routerLinkActive="active" *ngIf="type == 'admin'">

This compares with the variable called 'type' instead of the hardcoded string 'type', and also removes the unnecessary semicolon at the end of the *ngIf as it is not required there.