The router should display a component based on the user's access level, even if they are

Question

The router should display a component based on the user's access level, even if they are

I'm working on a scenario where the home route needs to cater to both admin and user roles. Is there a way to dynamically display the UserComponent if logged in as a user, and show the AdminComponent if logged in as an admin?

This is my current setup:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      // Mix of user/admin paths for child routes
    ]
  }
]

I was contemplating something like this, but I'm unsure how to access the service within the script:

component: this.userService.isAdmin ? AdminComponent : UserComponent,

javascript angular typescript

Answer 1

Answer №1

If you want to implement this in the HomeComponent, you can follow these steps:

Embed the following HTML code:

<admin-component *ngIf="isAdmin; else userHome;"></admin-component>
<ng-template #userHome>
    <user-component></user-component>
</ng-template>

In the TypeScript file, add the following code snippet:

class HomeComponent {
    public isAdmin: boolean;

    constructor(userService: UserService) {
         this.isAdmin = userService.isAdmin;
    }
}

Answer 2

If you want to implement this in the HomeComponent, you can follow these steps:

Embed the following HTML code:

<admin-component *ngIf="isAdmin; else userHome;"></admin-component>
<ng-template #userHome>
    <user-component></user-component>
</ng-template>

In the TypeScript file, add the following code snippet:

class HomeComponent {
    public isAdmin: boolean;

    constructor(userService: UserService) {
         this.isAdmin = userService.isAdmin;
    }
}

The router should display a component based on the user's access level, even if they are

Answer №1

Similar questions

I am eager to learn how to integrate the "fs" module from Node.js into an Electron project powered by Angular

Obtain user information post-payment with Angular's latest Paypal Checkout 2.0 feature

esBuild failing to generate typescript declaration files while running in watch mode

Issue with Vue JS function not providing the desired array output

Using the hover event in a jQuery plugin: A step-by-step guide

The class .is-invalid transforms into .is-valid when rendered

Does the Width Toggle Animation fail to function in FireFox when using jQuery?

Looking for a solution to the TypeScript & Mantine issue of DateValue not being assignable?

AngularJS application: the button requires two clicks to activate

Utilize an Angular HttpInterceptor to invoke a Promise

How can I conceal the element that came before in JavaScript?

Error: Attempted to update user profile with an invalid function in Firebase

Using React with Typescript involves using the React.createElement method

Setting an environment map in Three.js can replace the original texture on a model

Challenges with Angular 2 navigation paths

Nuxt - Vue - Utilizing middleware on a layout in a few simple steps

Having trouble with pm2 starting up correctly?

"Enhance Your Sublime 3 Experience with a Jade Syntax Highlighter, Linting, Auto Complete, and

How can I include a JSON object in an angularjs $scope variable?

Struggling with resolving unresolved dependencies