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.module.ts file because the modules contain definitions of the Lepton X components.

// app.module.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

 //... removed for clearity
  imports: [
  	//... removed for clearity
  	LpxResponsiveModule // <-- Optional
export class AppModule {}

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 *lpxResponsive="'md'">
    <div class="lpx-scroll-container ps" [perfectScrollbar]>
      <ng-container *ngTemplateOutlet="content"></ng-container>
  <ng-template #content>
      <div class="lpx-sidebar-container" *lpxResponsive="'md'">
        <div class="lpx-sidebar ps" [perfectScrollbar]>
      <div class="lpx-content-container">
        <div class="lpx-topbar-container">
          <div class="lpx-topbar">
            <div class="lpx-breadcrumb-container">
            <div class="lpx-topbar-content">
        <div class="lpx-content-wrapper">
          <div class="lpx-content">
        <div class="lpx-footbar-container">
      <lpx-mobile-navbar *lpxResponsive="'all md-none'"></lpx-mobile-navbar>

      <div class="lpx-toolbar-container" *lpxResponsive="'md'">

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

Was this page helpful?
Please make a selection.
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.

In this document
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.