Angular Routing views for different users

Question

I'm trying to set up the routing in my Angular 4 app for 3 types of users.

Once a user is logged in he will be redirected to my app-component. This is what my app-component.html looks like:

<div class="main-container">
  <div class="wrapper">
    <router-outlet></router-outlet>
  </div>
</div>

I want to check what the type of the user is and according to that - open a different route in my router-outlet. To give you an idea I will show you the structure that I'm going for:

index.html
>app-component
>register-component
>login-component
>dentist-view
  schedule component
  patients component
  profile component
  appointments component  etc..
>admin-view
  manage users component
>patient-view
  ambulatory-lists component
  profile component
  dentist search component
  book appointment component etc..

So according to the user type I want to load completely different views, that are structured like so in my project. I want different navigation bars for each user, different edit profile components etc.. What is the right approach to achieve this, as once logged in I will receive the user type on redirect to the app-component, so I will be able to send it to it's children - dentist-view-component, patient-view-component etc..

To give you a better idea something like an alternative to this, but with routing would be great: (disclaimer: i know that this is not possible :D) in app.component.html:

<div class="main-container">
  <div class="wrapper">
    <router-outlet>
     <dentist-component *ngIf="isDentist()"></dentist-component>
     <patient-component *ngIf="isPatient()"></patient-component>
     <admin-component *ngIf="isAdmin()"></admin-component>
   </router-outlet>
  </div>
</div>

As I'm new to this and still figuring things out I want to know if I'm headed the right direction or going a completely wrong way. Any advice is well appreciated.

score 2 · Answer 1 · answered Dec 02 '17 at 20:26

This answer was based on @abdul hammed answer More info in Angular.io documentation

Guards are the solution (guard.service):

    import { Injectable }     from '@angular/core';
    import { CanActivate }    from '@angular/router';
    import { Router } from '@angular/router';

    @Injectable()
    export class Guard implements CanActivate {
      canActivate() {

    if (this.user && this.user.profile.role == 'Dentist') {
             this.router.navigate(['dentist']);
        } if else (this.user && this.user.profile.role == 'Patient') {
            this.router.navigate(['patient']);
        } ...

        return true;
      }

 constructor(private router: Router) { }
    }

And you have to update your app.module file,

import { Guard } from './_services/guard.service';
import { DentistComponent } from './dentist/dentist.component';
import { PatientComponent } from './dentist/patient.component';
@NgModule({
  declarations: [
    AppComponent,
    DentistComponent,
    PatientComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,

    RouterModule.forRoot([
        {
          path: 'dentist',
          component: DestistComponent,
          canActivate:[Guard]
        },
        {
        path: 'patient',
        component: PatientComponent,
        canActivate:[Guard]
       }
    ])
  ],
  providers: [Guard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular Routing views for different users

1 Answers1