angularnebularngx-admin

ngx-admin / nebular how to create page outside pages module?


I just experimenting ngx-admin, I want to create a page that has no header and footer like pages, so I create a module with

ng g m print --route print --module app.module

inside routes

export const routes: Routes = [
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module')
      .then(m => m.PagesModule),
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'print', loadChildren: () => import('./print/print.module').then(m => m.PrintModule) },
  { path: '**', redirectTo: 'pages' },
];

in pages-menu.ts

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: 'E-commerce',
    icon: 'shopping-cart-outline',
    link: '/pages/dashboard',
    home: true,
  },
  {
    title: 'Print',
    link: '/print'
  },.....// the original menu in here 

When I run and clikc the print link, it just show blank page with nothing inside. I still have no idea how to create custom page in ngx-admin

I follow the instruction in here https://akveo.github.io/nebular/docs/auth/custom-auth-components#related-articles but it doesnt work as well.

I use angular 11 for this project and latest ngx-admin


Solution

    1. Create print module & component outside the page module

    ng g m print --routing=true
    ng g c print --inline-template=true --skip-tests=true --inline-style=true

    1. inside print.component.ts do this

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'ngx-print',
      template: `
          <router-outlet></router-outlet>
      `,
      styles: [
      ]
    })
    export class PrintComponent implements OnInit {   
      constructor() { }    
      ngOnInit(): void {
      }    
    }

    1. On app-routing.module.ts add:

    { path: 'print', loadChildren: () => import('./print/print.module').then( m => m.PrintModule) },

    1. Now try to access it from /print/ it shouold load your empty page without any layout components.