ng2-admin uses Angular Component Router for navigation.
We strongly recommend to follow this page structure in your application. If it does not fit your needs please create a GitHub issue and tell us why. We would be glad to discuss.
Basically any page is just a common Angular Component with a route defined for it.
1) Create a new directory for our new page inside of src/app/pages
. We can call the directory new
.
2) Then let’s create a blank angular component for our page called ‘new.component.ts’ inside of src/app/pages/new
:
import { Component } from '@angular/core';
@Component({
selector: 'new',
template: `<strong>My page content here</strong>`,
})
export class NewComponent {
constructor() {}
}
This will create a simple Angular component. For more detail please check out official Angular documentation.
3) After that we should create our component routing called new.routing.ts
in the new
directory.
import { Routes, RouterModule } from '@angular/router';
import { NewComponent } from './new.component';
const routes: Routes = [
{
path: '',
component: NewComponent
}
];
export const routing = RouterModule.forChild(routes);
4) And now we should create new.module.ts
in src/app/pages/new
directory and import new.component.ts
and new.routing.ts
in it.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NewComponent } from './new.component';
import { routing } from './new.routing';
@NgModule({
imports: [
CommonModule,
FormsModule,
routing
],
declarations: [
NewComponent
]
})
export class NewModule {}
5) The penultimate thing we need to do is to declare a route in src/app/pages/pages.menu.ts
.
Typically all pages are children of the /pages
route and defined under the children
property of the root pages
route like this:
export const PAGES_MENU = [
{
path: 'pages',
children: [
{
path: 'new', // path for our page
data: { // custom menu declaration
menu: {
title: 'New Page', // menu title
icon: 'ion-android-home', // menu icon
pathMatch: 'prefix', // use it if item children not displayed in menu
selected: false,
expanded: false,
order: 0
}
}
},
{
path: 'dashboard',
data: {
menu: {
title: 'Dashboard',
icon: 'ion-android-home',
selected: false,
expanded: false,
order: 0
}
}
}
}
}
]
If you’d like to highlight menu item when current URL path partially match the menu item
path - use pathMatch: ‘prefix’. In this case if the menu item has no children in the menu and
you navigated to some child route - the item will be highlighted.
6) And in the end let’s import our component in src/app/pages/pages.routing.ts
like this:
const routes: Routes = [
{
path: 'pages',
component: Pages,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
{ path: 'new', loadChildren: './new/new.module#NewModule' }
]
}
];
And that’s it! Now your page is available by the following this url http://localhost:4200/#/pages/new.
Plus, your page is registered inside the sidebar menu. If you don’t want to have a link
in the menu - just remove the menu
declaration from the pages.menu.ts
file.