How to load a create a login page

Question

i created the following template for the main component of my Angular2 app:

<header>
    <topbar></topbar>
</header>

<div class="middle">
    <sidebar></sidebar>
    <main>
        <router-outlet></router-outlet>
    </main>
</div>

<footer></footer>

As you can see i put my Angular router within the template, under the main tag.

Here is my app.routing.ts file:

import {Routes, RouterModule} from '@angular/router';
import {Page1Component} from './components/page1/page1.component';
import {Page2Component} from './components/page2/page2.component';
import {Page3Component} from './components/page3/page3.component';
import {PageNotFoundComponent} from './components/page-not-found/page-not-found.component';

const appRoutes: Routes = [
  { path: '', component: Page1Component },
  { path: 'page2', component: Page2Component },
  { path: 'page3', component: Page3Component },
  { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

Now i want to add a LoginComponent that make guest users (= users not logged to the app) not to see the app sections and contents. So the login component should load a page instead of previous template. For example its template could be the following:

<header></header>
<div class="welcome">
    <login></login>
</div>
<footer></footer>

So, how to add it to my routing system and prevent to load other components such as the sidebar, topbar and so on?

Answer 1

Your entry should look like this:

<router-outlet></router-outlet>    
<footer></footer>

And then the login-component is loaded or you main-component which contains all the users should see..

or store the users state in a variable and do something like this:

<header>
    <topbar *ngIf="userIsLoggedIn"></topbar>
</header>

<div class="middle">
    <sidebar *ngIf="userIsLoggedIn"></sidebar>
    <main>
        <router-outlet></router-outlet>
    </main>
</div>

<footer></footer>