Menu
I'm creating a Dashboard like application. I'd like to achieve the following layout plan in Angular (2+):
etc...
So basically what I'd like to do is to completely replace the contents of <body> at some (child) routes.
This is not good for me: multiple layout for different pages in angular 2 because I don't want to redirect / (root) to anywhere like /home.
This one doesn't fit either: How to switch layouts in Angular2
Any help would be great!
668
You can solve your problem using child routes.
See working demo at https://angular-multi-layout-example.stackblitz.io/ or edit at https://stackblitz.com/edit/angular-multi-layout-example
Set your route like below
const appRoutes: Routes = [
//Site routes goes here
{
path: '',
component: SiteLayoutComponent,
children: [
{ path: '', component: HomeComponent, pathMatch: 'full'},
{ path: 'about', component: AboutComponent }
]
},
// App routes goes here here
{
path: '',
component: AppLayoutComponent,
children: [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'profile', component: ProfileComponent }
]
},
//no layout routes
{ path: 'login', component: LoginComponent},
{ path: 'register', component: RegisterComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
Recommended reference: http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html
143
Ok I am going to give this a shot...
Routes
Creating routes can be done in multiple ways. You can use child routes or serve the component up directly.
If you want to serve the component up directly this would be ideal,
{ path: '*pathInURL*', component: *NameComponent* }
Direct problems you are facing
Three problems,
Show a component as a child.
Show a component in a template called fullwidth
Show a component in a template called mediumwidth
In your routes.ts
const APP_ROUTES: Routes = [
// landing page of your application
{ path: '', redirectTo: '/home', pathMatch: 'full', },
//anything that will be handled in blank template
{ path: '', component: BlankComponent, data: { title: 'blank Views' }, children: BLANK_ROUTES },
//anything that will be handled in fullwidth
{ path: '', component: FullComponent, data: { title: 'full Views' }, children: FULL_ROUTES },
// anything that will be handled in medium width
{ path: '', component: MediumComponent, data:{ title: 'Medium Views' }, children: MEDIUM_ROUTES }
];
This is going to forward all paths in the URL to look to these routes. It will check the routes to see which template it will fall in.
Then create 3 directories.
/blank
/full
/medium
Inside these folders you will keep your component that use each of the mother templates.
So since login is blank. It would be in /blank
/blank/BlankComonent.ts
Also in each of these directories you will create a routes file which is referred to in the initial routes file we have already created.
/blank/blank.routes.ts
export const BLANK_ROUTES: Routes = [
{ path: 'login', component: LoginComponent }
];
Then in medium the same thing,
/blank/blank.routes.ts
export const MEDIUM_ROUTES: Routes = [
{ path: 'Some/Path', component: SomeMediumComponent }
];
And then the same for FULL_ROUTES
Make a routes file for each directory we created. Add all your routes that live in the same directory and will share the same mother template.
Then we will create a templates directory. Call it /layouts
Now in that direcotry this is where you will create
BlankComponent.ts FullComponent.ts MediumComponent.ts
Each of these components will have their corresponding routes served inside of these templates. Because remember our first routes file says that we will serve all Child Routes to these templates.
So the layouts will be served to the router-outlet
import { Component } from '@angular/core';
@Component({
selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
