0

I am developing a blog site with Angular 2. Now I want to show a signup/login form on landing page when user visit my site only signup form will show no menu or header.

Now when user logged in they will redirect to /dashboard and see the menus and header and content

Now how to start. Is it possible to use two router-outlets?

Signup layout image: http://prntscr.com/dwh1qg

Dashboard layout : http://prntscr.com/dwh2lp

muetzerich
  • 5,600
  • 7
  • 37
  • 52
Rakesh Roy
  • 930
  • 2
  • 12
  • 22

1 Answers1

0

Each component can contain router-outlet.

I think that you should create App component which would contain routes to Dashboard component and Default component. In those components you should also put router-outlet and create different routes.

This way you can have different templates for each group of components.

@RouteConfig([
   { path: '/dahsboard/...', name: 'Dashboard', component: DashboardComponent },
   { path: '/...', name: 'Default', component: DefaultComponent }
])
export class AppComponent

Your template for this component can be as simple as <router-outlet></router-outlet>.

Then your child components can have different routing and different templates.

@RouteConfig([
   { path: '/home', name: 'Home', component: HomeComponent },
   { path: '/sign-up', name: 'SignUp', component: SignupComponent }
])
export class DefaultComponent

And it's template should also contain <router-outlet></router-outlet>.

Mateusz Woźniak
  • 1,479
  • 1
  • 9
  • 10