Working with layouts in Angular2 app

Question

I have developed an Angular2 app using routing.

My problem scenario is:

I have a Login page which has different HTML and CSS.Once successfully logged in, I redirect to another page which has different HTML and CSS. But I have index.html(login page) as my main layout. Hence I need to understand how to work with multiple layouts?

I have done some R&D but I am not able to understand how to implement it?

Please find below code:

1) app.routing.module

import { NgModule } from '@angular/core';
import { Routes, Router, RouterModule } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';
import { LoginComponent } from './components/login/login.component';

const routes: Routes = [
{
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: 'employee',
    component: EmployeeComponent,
    canActivate: [AuthGuard]
}];
export class AppRoutingModule {   }
export const routedComponents = [LoginComponent,EmployeeComponent];

2) App component

import { Component} from '@angular/core';
@Component({
           selector: 'my-app',
           template: `
          <router-outlet></router-outlet>
          `
          })
export class AppComponent {
        constructor() {
        }
}

3) App module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import { AppComponent }   from './app.component';
import { AppRoutingModule, routedComponents } from './app-routing.module';
import { AuthGuard } from './guards/auth.guard';


 @NgModule({
     imports: [BrowserModule,
               HttpModule,
               AppRoutingModule
      ],
     declarations: [AppComponent,
                    routedComponents
     ],
     providers: [AuthGuard],
     bootstrap: [AppComponent]

    })
 export class AppModule { }

4) Index.html

 <my-app>

 </my-app>

Any help would be highly appreciable!

Thanks!!

create `login-page` route component separately, don't use index.html for showing login page, and when someone comes to your app navigate them to login-page route if user is not login. write this logic in your root app component — Satendra, Dec 13 '16 at 07:48
post some code here how you are doing. It will be helpful to suggest any solution. — Satendra, Dec 13 '16 at 07:49

score 2 · Accepted Answer · answered Dec 21 '16 at 14:18

Remove all CSS from index.html and create separate component for login and another component say home for other features.
Load CSS for login and home in login component and home component respectively.

Create separate routes for login and home,place all other features routes inside home route as child route. Please find below code:

{
path: 'login',
component: LoginComponent
},
{
  path: 'home',
  component: HomeComponent,
  children: [
       {
        path: 'childPage',
        component: childPageComponent
       }]
}

Use below line to navigate to child page:

this.router.navigate(['/home/childPage'])

Thanks!!!

score 0 · Answer 2 · answered Dec 13 '16 at 07:50

Look at angular2 component styles

As said in this reference:

We have several ways to add styles to a component:

inline in the template HTML

by setting styles

or styleUrls metadata with CSS imports

In addition I recommend you create components (and routings) like tree (Hierarchy) in one module. For checking user login status You need one shared service (for example authservice).

Working with layouts in Angular2 app

2 Answers2