Open Closed

Custom Angular UI Sidebar #120


User avatar
0
ian@order2invoice.com created

We need to implement a sidebar which is different to the one provided by Leton that include dual menus. Can we replace the sidebar.? Futher to this can we do the same to the TopBar. For example, we want to place a glabal search in the top bar?

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

8 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    See https://docs.abp.io/en/abp/latest/Customizing-Application-Modules-Overriding-User-Interface for more information.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    ian@order2invoice.com created

    Looks promising. I can't find the ApplicationLayoutComponent. I am assuming that if I could I would just be able to change that. Consequently so I don't have an example to know how to write this component and link it to the rest of the app, etc? Are you ableto provide an example or the source of the ApplicationLayoutComponent.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    ian@order2invoice.com created

    FYI I am using Angular

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    Hi,

    See the component replacement document. The layout replacement has been documented.

    You can import eThemeLeptonComponents enum from @abp/ng.theme.lepton as shown below:

    import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
    import { eThemeLeptonComponents } from '@abp/ng.theme.lepton'; // imported eThemeLeptonComponents enum for component keys
    import { Store } from '@ngxs/store'; // imported Store
    //...
    export class AppComponent {
      constructor(..., private store: Store) {} // injected Store
    
      ngOnInit() {
        // added below content
        this.store.dispatch(
          new AddReplaceableComponent({
            component: YourApplicationComponent,
            key: eThemeBasicComponents.ApplicationLayout,
          }),
        );
    
        //...
      }
    }
    
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    ian@order2invoice.com created

    Sorry Mehmet. Thank you for the above. However I don't think I have explained well enough. What I am looking for a simple exmaple of the Angular template I need to write. In asp. In ABP Zero the the sidebar and top bar componets were available and easy to customise. In Abp IO they are "hidden". Why is this the case? Do I need to buy a higher license?

    Anyway, are you able to provide simple example of the Angular template I need to write

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    alper created
    Support Team Director

    We are working on customization, so that you can replace these components easier (next version). You can uprade to Business plan, and access to the source code of the Angular and backend source-code. So you can easily change every part of it.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    ian@order2invoice.com created

    The Busines Plan in way above my pay grade. What's the eta on the next version?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    alper created
    Support Team Director

    tuesday 05-05-2020

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
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
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.