Filter by title

Custom layout usage with Lepton X components

First, The custom layout component should be created and implemented for the Angular application. Related content can be found in the Component Replacement Document

After creating a custom layout, these imports should be imported in the app.config.ts file because the modules contain definitions of the Lepton X components.

// app.config.ts
import { LpxSideMenuLayoutModule } from '@volosoft/ngx-lepton-x/layouts';
import { LpxResponsiveModule } from '@volo/ngx-lepton-x.core';// optional. Only, if you are using lpxResponsive directive

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom([
      LpxSideMenuLayoutModule,
  	  LpxResponsiveModule // <-- Optional
    ])
  ],
};

Here is the simplified version of the side-menu-layout.ts file. Only the ABP Component Replacement code has been removed.

<ng-container *lpxResponsive="'all md-none'">
    <ng-container *ngTemplateOutlet="content"></ng-container>
  </ng-container>
  <ng-container *lpxResponsive="'md'">
    <div class="lpx-scroll-container ps" [perfectScrollbar]>
      <ng-container *ngTemplateOutlet="content"></ng-container>
    </div>
  </ng-container>
  <ng-template #content>
    <div
      id="lpx-wrapper">
      <div class="lpx-sidebar-container" *lpxResponsive="'md'">
        <div class="lpx-sidebar ps" [perfectScrollbar]>
            <lpx-navbar></lpx-navbar>
        </div>
      </div>
  
      <div class="lpx-content-container">
        <div class="lpx-topbar-container">
          <div class="lpx-topbar">
            <div class="lpx-breadcrumb-container">
                <lpx-breadcrumb></lpx-breadcrumb>
            </div>
            <div class="lpx-topbar-content">
              <lpx-topbar-content></lpx-topbar-content>
            </div>
          </div>
        </div>
        <div class="lpx-content-wrapper">
          <div class="lpx-content">
            <router-outlet></router-outlet>
          </div>
        </div>
        <div class="lpx-footbar-container">
            <lpx-footer></lpx-footer>
        </div>
      </div>
  
      <lpx-mobile-navbar *lpxResponsive="'all md-none'"></lpx-mobile-navbar>

      <div class="lpx-toolbar-container" *lpxResponsive="'md'">
        <lpx-toolbar-container></lpx-toolbar-container>
        <lpx-avatar></lpx-avatar>
        <lpx-settings></lpx-settings>
      </div>
    </div>
  </ng-template>

Add this code to your application template and customize it as desired.

Contributors


Last updated: July 11, 2025 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

ABP Community Talks
Beyond WordPress: A Developer-Friendly CMS for .NET
28 Aug, 17:00
Online
Watch the Event
ABP Live Webinar
Webinar Calendar Webinar Calendar
Discover
ABP Platform
Register Now
Oct 01
Wednesday,
17:00 UTC
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book