Angular 5 ngSwitch is not working

Question

In my application I am trying to implement navbar based on roles of user. If user is a admin it should show a different menu and for normal user it should show the menu only for the user. I am using ngSwitch to restrict the navbar but could not do it. Please have a look.

<div [ngSwitch] = "myrole">
  <ng-template *ngSwitchCase = "'Admin'">
    <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" routerLink = '/home' routerActive = 'active'>Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink = '/logout' routerActive = 'active' >Log Out</a>
          </li>
          <li class="nav-item" style="text-align:right">
            <span class="nav-link navbar-right">{{username}}</span>
          </li>
        </ul>
      </nav>
    </ng-template>
    <ng-template *ngSwitchCase = "'NoUser'">
      <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" routerLink = '/home' routerActive = 'active'>Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink = '/login' routerActive = 'active' >Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink = '/signup' routerActive = 'active' >Sign UP</a>
          </li>
        </ul>
      </nav>
    </ng-template>

    </div>

Be consistent with your quoting and spacing. HTML is hard enough to read as it is. Arbitrarily mixing `'` and `"` and inconsistent tag spacing make it hard to read and lead to bugs. — Aluan Haddad, Mar 31 '18 at 05:36

score 3 · Answer 1 · answered Mar 31 '18 at 05:35

3

Your syntax is wrong, Change

From

 <ng-template *ngSwitchCase = "'Admin'">

To

 <ng-template [ngSwitchCase] = "'Admin'">

answered Mar 31 '18 at 05:35

Sajeetharan

216,225
63
350
396

Alternatively, you could remove the `` entirely and instead use the `*` form of a template structural directive on the `
` item like `
`. Basically it's EITHER `*` or ``.
– John Mar 31 '18 at 05:37
Also tried [ngSwitchCase] inside nav tag. Not working – Hasan Zubairi Mar 31 '18 at 05:51

Vikas Garg · Answer 2 · 2018-03-31T08:00:03.657

0

with ng-template you need to use property binding instead of structural binding. So change FROM

<ng-template *ngSwitchCase = "'Admin'">

to

   <ng-template  [ngSwitchCase] = "'Admin'">

OR There is another solution

use ngSwitchCase as structural directive but without ng-template i.e.

<div *ngSwitchCase = "'Admin'">

edited Mar 31 '18 at 08:00

answered Mar 31 '18 at 05:52

Vikas Garg

202
2
8

Hi Can you check the implementation posted in another answer – Vikas Garg Mar 31 '18 at 11:46

score 0 · Answer 3 · answered Mar 31 '18 at 06:33

Here is code

HTML template is

<div [ngSwitch] = "myrole">
  <ng-template [ngSwitchCase] = "'Admin'">
    <nav class="navbar navbar-expand-sm">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" >Log Out</a>
          </li>
          <li class="nav-item" style="text-align:right">
            <span class="nav-link navbar-right">{{'Test'}}</span>
          </li>
        </ul>
      </nav>
    </ng-template>
    <ng-template [ngSwitchCase] = "'NoUser'">
      <nav class="navbar navbar-expand-sm">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a href="/">Home</a>           
          </li>
          <li class="nav-item">
             <a href="/">Login</a>           
          </li>
          <li class="nav-item">
              <a href="/">Sign Up</a>          
          </li>
        </ul>
      </nav>
    </ng-template>

    </div>

ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-switch-exampl',
  templateUrl: './switch-exampl.component.html',
  styleUrls: ['./switch-exampl.component.css']
})
export class SwitchExamplComponent implements OnInit {

  myrole: string = 'Admin'
  constructor() { }

  ngOnInit() {
  }

}

score 0 · Answer 4 · answered Mar 31 '18 at 12:53

Sorry guys my bad. The role is coming from a service and it is initializing the role as empty string when the component is initialized. So as a solution I have added another section like this

 <ng-template  [ngSwitchCase] = "''">......</ng-template>

Thanks for your suggestions.

Angular 5 ngSwitch is not working

4 Answers4