logo The World’s #1 Bootstrap 4 HTML, Angular 9, React, VueJS & Laravel
Admin Dashboard Theme

How to create a custom page

Here is the example on how to create your own page and add it to the left side menu and breadcrumbs.

1. Create a custom Page

Run this Angular CLI command for generate new component:

ng generate component views/pages/my-page

The result of the command is:

how-to-create-custom-page-module

2. Register new component in the theme routing

Register new component in the /src/app/app-routing.module.ts file:

// Other imports
import { MyPageComponent } from './views/pages/my-page/my-page.component';

{
    path: '',
    component: BaseComponent,
    canActivate: [AuthGuard],
    children: [
        {
          path: 'my-page', // <= Page URL
          component: MyPageComponent // <= Page component registration
        },
        {
            path: 'dashboard',
            loadChildren: () => import('app/views/pages/dashboard/dashboard.module').then(m => m.DashboardModule)
        },
        {
            path: 'mail',
            loadChildren: () => import('app/views/pages/apps/mail/mail.module').then(m => m.MailModule)
        },
        {
            path: 'ecommerce',
            loadChildren: () => import('app/views/pages/apps/e-commerce/e-commerce.module').then(m => m.ECommerceModule),
        },
// Other code

3. Add page to the left menu

Add page to the left menu in /src/app/core/_config/menu.config.ts file:

// Other imports
export class MenuConfig {
  public config: any = {};

  constructor() {
    this.config = {
      header: {
        self: {},
        items: [
          // Header menu configuration
        ]
      },
      aside: {
        self: {},
        items: [
          {
            title: 'Dashboard',
            root: true,
            alignment: 'left',
            page: '/dashboard',
            translate: 'MENU.DASHBOARD'
          },
          {
            title: 'My Page', // <= Title of the page
            desc: 'Some my description goes here', // <= Description of the page
            root: true,
            page: '/my-page', // <= URL
            icon: 'flaticon-line-graph' // <= Choose the icon class
           },
           {section: 'Components'},

// Other code

4. Add page to the breadcumbs

Add page to the breadcrumbs in /src/app/core/_config/pages.config.ts file:


export class PageConfig {
    public defaults: any = {
        dashboard: {
            page: {
                'title': 'Dashboard',
                'desc': 'Latest updates and statistic charts'
            },
        },
        'my-page': { // <= add page URL
            page: { title: 'My page', desc: 'My page desc' } // <= Page name and description
        },
        ngbootstrap: {
            accordion: {
                page: {title: 'Accordion', desc: ''}
            },
            alert: {
                page: {title: 'Alert', desc: ''}
            },
// Other code

The result of the 4 steps is:

how-to-create-custom-page-3