Angular - Sidebar not to show in Login but to show in Dashboard - Angular Routing

Question

How to hide sidebar in login page?

How can I open login page first without sidebar and then after successful login will redirect on dashboard of template in Angular 4.

Answer 1

The best way to do this is to design a Shell Component(suggested by Deborah Kurata in this ngConf talk) which will house your View After the user logs in.

The template of this Shell Component will house the Side Bar. The template of this Shell Component will also have a router-outlet for internal routing.

So your Routes config will look something like this:

const appRoutes: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      ...
      {
        path: 'view',
        component: ViewPostComponent
      },
      {
        path: '',
        component: PlaceholderComponent
      }
    ]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }
];

Template for the Shell Component:

<!--Markup for your Sidebar here-->

<router-outlet></router-outlet>
<!--This router outlet is for Components that will load through child routing-->

Template for your App Component:

<router-outlet></router-outlet>

Here's a Sample StackBlitz for your ref.