How to use separate layout for input component in angular 2?

Question

I am new to angular. I am creating a login component, it works fine, but the problem is that I need a separate login layout from the whole application. What changes are needed for this?

I'm looking in google, but everyone gives a diff solution, which is also not clear.

const appRoutes: Routes = [ { path: 'alert/:id', component: AlertDetailComponent }, { path: 'alerts', component: AlertsComponent }, { path: 'dashboard', component: EriskDashboardComponent }, { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, ]; 

In app.component.html

 <!-- page content --> <div class="right_col" role="main"> <router-outlet></router-outlet> </div> <!-- /page content --> 

Answer 1

In app.component.html :

 <router-outlet></router-outlet> 

Then create MainComponent (main.component.ts) and put all your main application layout in main.component.html :

 <!-- page content --> <div class="right_col" role="main"> <router-outlet></router-outlet> </div> <!-- /page content --> 

This component will be the parent for each of your regular application components.

Then in your LoginComponent put a different layout without the router exiting, for example:

 <div class="login-wrapper"> <div class="login"> ... your login layout </div> </div> 

Then change your routing like this:

 const appRoutes: Routes = [ {path: 'login', component: LoginComponent}, {path: '', component: MainComponent, redirectTo: '/dashboard', pathMatch: 'full', children: [ { path: 'alert/:id', component: AlertDetailComponent }, { path: 'alerts', component: AlertsComponent }, { path: 'dashboard', component: EriskDashboardComponent } ]}]; 

So, MainComponent will contain all reusable layouts and application structure for any child component, while LoginComponent is independent and has its own layout.

Answer 2

In the "main" parent component, you can .subscribe on router.events data , and as soon as you click on the login component as the active route, this component will be notified and add the css class or id for the other layout (theme) you want (maybe , it will be encapsulated in a partial scss file - if you are not using scss / sass, you might want to consider it).

As soon as you change the route (except for logging in), the class will disappear, and the “custom” (other) layout will no longer apply.

Hope this helps. You can always use @Output / @Input() or a common single-user service with observables (for relations between parents and child components) to share state between these components and create material based on state change. If you have any questions / comments, feel free to add them. I think angular docs can help with implementation details.