Here is the example on how to create your own page and add it to the left side menu and breadcrumbs.
The World’s #1 Bootstrap 4 HTML, Angular 10, React, VueJS & LaravelHere is the example on how to create your own page and add it to the left side menu and breadcrumbs.
Run this Angular CLI command for generate new component:
cd .\src\app\pages\
ng g c my-page
Register new component in the /src/app/pages/pages-routing.module.ts file:
// Other imports
import { MyPageComponent } from './my-page/my-page.component';
{
path: '',
component: LayoutComponent,
children: [
{
path: 'my-page', // <= Page URL
component: MyPageComponent // <= Page component registration
},
{
path: 'dashboard',
loadChildren: () =>
import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
},
{
path: 'builder',
loadChildren: () =>
import('./builder/builder.module').then((m) => m.BuilderModule),
},
// Other code
Add page to the left menu in /src/app/pages/_layout/components/aside/aside.component.html file:
// Other code
<!-- begin::1 Level -->
<li
class="menu-item"
aria-haspopup="true"
routerLinkActive="menu-item-active"
>
<a class="menu-link" routerLink="/my-page" routerLinkActive="active">
<span
[inlineSVG]="'./assets/media/svg/icons/Design/Layers.svg'"
cacheSVG="true"
class="svg-icon menu-icon"
></span>
<span class="menu-text">My Page</span>
</a>
</li>
<!-- end::1 Level -->
// Other code
If you are using 'dynamic' aside menu, add page to the config /src/app/_metronic/configs/dynamic-aside-menu.config.ts file:
// Other code
},
{
title: 'My Page',
root: true,
icon: 'flaticon2-expand',
page: '/my-page',
svg: './assets/media/svg/icons/Home/Library.svg'
},
{
title: 'Layout Builder',
// Other code