Hide menu item

[Ronald Rex]

Hello Friends,

I was wondering where and how would I use the @NgIf diective if I want to show or dhide a menu item based on a users Role. For example if the user is not an Admin then I want to hide a menu item but if they are an Admin I want to show the menu item. The menu item is to show a route to a user roles management component. And I guess this would be a good time to ask does anyone know of a tutorial covering building a user role management cmponent that uses the .net Core Identity system. Thanks !!!!

[Dattaram Hodawadekar]

for this you have some settings like this manner, set some boolean value for role type
please check may be it will help you

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

import { TokenStorageService } from './_services/token-storage.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  private roles: string[] = [];

  isLoggedIn = false;

  showAdminBoard = false;

  showModeratorBoard = false;

  username?: string;

  constructor(private tokenStorageService: TokenStorageService) { }

  ngOnInit(): void {

    this.isLoggedIn = !!this.tokenStorageService.getToken();

    if (this.isLoggedIn) {

      const user = this.tokenStorageService.getUser();

      this.roles = user.roles;

      this.showAdminBoard = this.roles.includes('ROLE_ADMIN');

      alert(this.showAdminBoard)

      this.showModeratorBoard = this.roles.includes('ROLE_MODERATOR');

      this.username = user.username;

    }

  }

  logout(): void {

    this.tokenStorageService.signOut();

    window.location.reload();

  }

}

<div id="app">

  <nav class="navbar navbar-expand navbar-dark bg-dark">

    <a href="#" class="navbar-brand">test</a>

    <ul class="navbar-nav mr-auto" routerLinkActive="active">

      <li class="nav-item">

        <a href="/home" class="nav-link" routerLink="home">Home </a>

      </li>

      <li class="nav-item" *ngIf="showAdminBoard">

        <a href="/admin" class="nav-link" routerLink="admin">Admin Board</a>

      </li>

      <li class="nav-item" *ngIf="showModeratorBoard">

        <a href="/mod" class="nav-link" routerLink="mod">Moderator Board</a>

      </li>

      <li class="nav-item">

        <a href="/users" class="nav-link" *ngIf="isLoggedIn" routerLink="user">User</a>

      </li>

    </ul>

    <ul class="navbar-nav ml-auto" *ngIf="!isLoggedIn">

      <li class="nav-item">

        <a href="/register" class="nav-link" routerLink="register">Sign Up</a>

      </li>

      <li class="nav-item">

        <a href="/login" class="nav-link" routerLink="login">Login</a>

      </li>

    </ul>

    <ul class="navbar-nav ml-auto" *ngIf="isLoggedIn">

      <li class="nav-item">

        <a href="/profile" class="nav-link" routerLink="profile">{{ username }}</a>

      </li>

      <li class="nav-item">

        <a href class="nav-link" (click)="logout()">LogOut</a>

      </li>

    </ul>

  </nav>

  <div class="container">

    <router-outlet></router-outlet>

  </div>

</div>

On Wed, Dec 15, 2021 at 1:28 AM Ronald Rex <trust...@gmail.com> wrote:

Hello Friends,

I was wondering where and how would I use the @NgIf diective if I want to show or dhide a menu item based on a users Role. For example if the user is not an Admin then I want to hide a menu item but if they are an Admin I want to show the menu item. The menu item is to show a route to a user roles management component. And I guess this would be a good time to ask does anyone know of a tutorial covering building a user role management cmponent that uses the .net Core Identity system. Thanks !!!!

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/d8572741-13e6-4b18-8a48-697480a22e56n%40googlegroups.com.