Nav Toolbar And Side Nav Not Coming In Other Components

I have searched for this question a lot but still unable to find the solution. In my app, the after successful logging in the page shows the side nav and toolbar. When an item(comp

Solution 1:

Please try this: - in your app.component.html remove ngIf:

<div><app-applayoutmodel></app-applayoutmodel></div><divclass="container"><router-outlet></router-outlet></div>

- in your app-routing.module.ts you need to put your dashboard component as child component of AppComponent like this:

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  { path: 'applayout', 
    component: AppComponent,
    children: [
        {path: 'dashboard', component: DashboardComponent }
    ]
  }
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

This is because you want your applayoutmodel component always to be availible even if you click on 'dashboard'. This is where your router-outlet jumps-in: he renders your Dashboard component in place of tag, and preserves applayoutmodel component rendered and intact. Please try this and let me know...