Pages UI
Search…
v5.0.1 - Pages Angular
Directives
Forms
Service
Routing
Basic Routing
Routing is a key component is a must read if you want to get a clear understanding of how layouts change from each route. All sample routes are in
src/app/app.routing.ts. You may wish to remove all routes and add your routes. First select the what your root layout you want it to be. Here I will use Condensed layout1
import { Routes } from '@angular/router';
2
//Layouts
3
import {
4
CondensedComponent,
5
BlankComponent,
6
} from './@pages/layouts';
7
​
8
//Single Page
9
import { CondensedDashboardComponent} from './dashboard/condensed/dashboard.component';
10
​
11
export const AppRoutes: Routes = [
12
{
13
path: 'home',
14
component: CondensedComponent,
15
children: [{
16
path: 'dashboard',
17
//Sub Single Page
18
component: CondensedDashboardComponent
19
}],
20
},
21
]
Copied!
CondensedComponent is your condensed layout located in @pages/layouts/condensed it contains HTML and SCSS imports required for it to work with all UI / form components scss files as well. In the first route I have used
1
{
2
path: 'home',
3
component: CondensedComponent,
4
children: [{
5
path: 'dashboard',
6
component: CondensedDashboardComponent
7
}],
8
},
Copied!
component: CondensedComponent is where the root layout is assigned and inside the children is your sub pages. So I have imported a sample sub page and assigned it
1
{
2
path: 'dashboard',
3
component: CondensedDashboardComponent
4
}
Copied!
Your routing path will
home/dashboard​
Nested Routing
Instead of routing to one single page you may want to route into a sub router making it a nested routing.
1
{
2
path: 'home',
3
component: CondensedComponent,
4
children: [{
5
path: 'ui',
6
loadChildren: './ui/ui.module#UiModule'
7
}]
8
}
Copied!
Instead of loading a single component you simply add loadChildren: './ui/ui.module#UiModule' you need to make sure that ui.module or your sub module globally assigned / imported in the app.module.ts file for the router to understand.
Next in your sub module folder make routing.ts file. In the example src/app/ui/ui.routing.ts
1
import { Routes } from '@angular/router';
2
​
3
//Sample Demo pages
4
import { ButtonspageComponent } from './buttonspage/buttonspage.component';
5
​
6
export const uiRoute: Routes = [
7
{
8
path: 'buttons',
9
component: ButtonspageComponent
10
}
11
]
Copied!
This will import all the sub pages in that folder with its path and component name as show in the sample code above.
Lastly make a submodule folder so your route component can import them all at once. This sub module folder will import any dependencies required in your sub pages.
1
//Angular Dependencies
2
import { NgModule } from '@angular/core';
3
import { CommonModule } from '@angular/common';
4
import { RouterModule } from '@angular/router';
5
import { HttpModule} from '@angular/http';
6
import { HttpClientModule } from '@angular/common/http';
7
//Requires Forms to be imported for Checkbox buttons
8
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
9
​
10
//This is your sub router
11
import { uiRoute } from './ui.routing';
12
​
13
@NgModule({
14
imports: [
15
CommonModule,
16
SharedModule,
17
HttpModule,
18
HttpClientModule,
19
RouterModule.forChild(uiRoute)
20
],
21
declarations: [ButtonspageComponent],
22
providers: []
23
})
24
export class UiModule { }
Copied!
The above code is a sample module ts that has its own sub router
import { uiRoute } from './ui.routing'; and declarations of its own sub pages. Importing this to the main app router will help create nested routing ​
Missing styles
While your importing layouts to your main app.routing.ts. If a component has missing styles check @pages/layout/layout-name/layout-name.component.scss;
eg : @pages/layout/condensed/condensed.scss;
Last modified 3yr ago
Copy link