Here is the example on how to create your own page and add it to the left side menu and breadcrumbs.
Here 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