Displaying Sign_In page without SIdebar - html

Question

I have the first page displays information so let's say inside the sidebar, navbar and footer.
How to make an authorization page display without these components, and all other pages display as usual.
app.component.html:
<div class="wrapper">
<div class="sidebar" data-color='blue' data-image="">
<app-sidebar></app-sidebar>
<div class="sidebar-background" style="background-image: url(../assets/img/sidebar.jpg)"></div>
</div>
<div class="main-panel">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<div *ngIf="isMaps('maps')">
<app-footer></app-footer>
</div>
</div>
</div>
routing.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule, } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { Routes, RouterModule } from '#angular/router';
import { AuthGuard } from '../shared/guards/auth.guard';
import { SignInComponent } from '../components/sign-in/sign-in.component';
import { ProfileComponent } from '../components/profile/profile.component';
const routes: Routes =[
{ path: 'sign_in', component: SignInComponent },
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]},
{ path: '', redirectTo: 'profile', pathMatch: 'full' }
];
#NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [
],
})
export class RoutingModule { }

Answer 1

Using multiple <router-outlet></router-outlet> we can handle.
in app.component.ts
<div class="wrapper">
<router-outlet></router-outlet>
</div>
create new dashboard component in app/dashboard
in dashboard.component.ts
<div class="wrapper">
<div class="sidebar" data-color='blue' data-image="">
<app-sidebar></app-sidebar>
<div class="sidebar-background" style="background-image: url(../assets/img/sidebar.jpg)"></div>
</div>
<div class="main-panel">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<div *ngIf="isMaps('maps')">
<app-footer></app-footer>
</div>
</div>
</div>
use App components before Login screens
use Dashboard components after login screens
Consider this git repo for your ref
https://github.com/start-angular/SB-Admin-BS4-Angular-5