CODEWITHSUNDEEP
angularangular2-formsangular4-forms
Prabhu
Prabhu

Reputation: 647

Open Login component as Separate Page

I want to open login page in separate. But its opening in inside routeroutlet page. Please help.

PFB below screenshot for your reference.

enter image description here

Please refer my code below.

App.Routing.ts :

import { Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

export const AppRoute: Routes = [
    { path: '', redirectTo: 'HomeComponent', pathMatch: 'full' },
    { path: 'login', component: LoginCoHomeComponentmponent },
    { path: 'home', component: HomeComponent },

];

App.Component.html

<div id="wrapper">
   <app-top-bar></app-top-bar>
   <router-outlet></router-outlet>
</div>

App.Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { SelectModule } from 'ng2-select';
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';

import { AppComponent } from './app.component';
import { SideBarComponent } from './components/side-bar/side-bar.component';
import { TopBarComponent } from './components/top-bar/top-bar.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

import { AppRoute } from './app.routing';
import { RouterModule } from '@angular/router';
import { Service } from './Service/service';
import { ConfigService } from './Service/config.service';
import { HomeComponent } from './components/home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    SideBarComponent,
    TopBarComponent,
    DashboardComponent,
    RoleManagementComponent,
    UserManagementComponent,
    UserListComponent,
    LoginComponent,
    HomeComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(AppRoute),
    SelectModule,
    Ng2Bs3ModalModule,
    MyDatePickerModule
  ],
  providers: [{ provide: LocationStrategy, useValue: '/AAA', useClass: HashLocationStrategy }, Service, ConfigService],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.Componenet.html: Modified

 <div id="wrapper">
   <router-outlet></router-outlet>
 </div>

Home.component.html Modified 

<app-top-bar></app-top-bar>

app-top-bar contains top menu and side bar user menus. Its is static component.

Thanks in advance.

Upvotes: 4

Views: 8043

Answers (2)

Tharindu Nilakshana
Tharindu Nilakshana

Reputation: 61

i archived this using the service,
in my jwt service file check the user is logged in or not (token is expired or not)

export class JwtAuthService {

  constructor(public jwtHelper: JwtHelperService) {}
  // ...
  public isAuthenticated(): boolean {
      const token = localStorage.getItem('token');
    var isExpired = true;
    // Check whether the token is expired and return
    // true or false
    if(token != null){
      isExpired = !this.jwtHelper.isTokenExpired(token);
      console.log("not null" + isExpired)
    }else{
      isExpired = false;
      console.log("null" + isExpired)
    }
    return isExpired;
    
  }

  }

Then in app.component.html file add the following

<app-tool-bar *ngIf="authService.isAuthenticated() == true"></app-tool-bar>
<app-sidenav-bar *ngIf="authService.isAuthenticated() == true"></app-sidenav-bar>
<router-outlet *ngIf="authService.isAuthenticated() == false"></router-outlet>

Here app-tool-bar and app-sidenav-bar is two separate components. Also in the nav-sidenav-bar component has the inside it. if user is logged, used the app-tool-bar and app-sidenav-bar component Else we simply use the without the app tool bar and side navbar

So using this we can load Login page without sidebar and toolbar, all the other pages with toolbar and navbar

Thank you if you have any doubt please reply to this answer

Upvotes: 0

willmaz
willmaz

Reputation: 2475

In your App.Component.html : change to this : <router-outlet></router-outlet> so remove <app-top-bar></app-top-bar>

In App.Routing.ts : change { path: '', redirectTo: 'HomeComponent', pathMatch: 'full' }

To: 

{ path: '', component: LoginComponent},
{ path: 'dashboard', component: DashboardComponent,
          children: [
             { path: 'page1', component: Page1Component},
             { path: 'page2', component: Page2Component}
          ]
}

In dashboard.component.html : (Home)

<header-bar>
<side-bar>
<router-outlet></router-outlet>

Upvotes: 10

Related Questions