Ends in:
3 DAYS
5 HRS
37 MIN
15 SEC
Ends in:
3 D
5 H
37 M
15 S
Open Closed

Override ApplicationLayout #4932


User avatar
0
aaguiar created

I'm trying to override ApplicationLayout to change header components and remove the default right toolbar.

I was trying to follow this link: https://www.youtube.com/watch?v=R9CqTtn6Wcg

But they don't share the source code for a sample code to override the layouts, and when I tried to do myself I keep getting errors, can you please share some sample code in order to achieve that? I tried to check the documentation but there is nothing there related to this, only this https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement which is not helpful at all.

this is my tentative to override the component:

app-layout.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-layout',
  templateUrl: './app-layout.component.html',
  styleUrls: ['./app-layout.component.scss'],
})
export class AppLayoutComponent {}

app-layout.component.html

<ng-container>
    <ng-container *ngTemplateOutlet="content"></ng-container>
</ng-container>
<ng-container>
    <div class="lpx-scroll-container ps" perfectScrollbar>
        <ng-container *ngTemplateOutlet="content"></ng-container>
    </div>
</ng-container>
<ng-template #content>
    <div id="lpx-wrapper" *ngIf="layoutService.containerClass$ | async as containerClass" [ngClass]="containerClass">
        <div class="lpx-sidebar-container">
            <div class="lpx-sidebar ps" perfectScrollbar>
                <ng-container *ngTemplateOutlet="navbarPanel?.template || defaultNavbar"></ng-container>
            </div>
        </div>

        <div class="lpx-content-container">
            <div class="lpx-topbar-container">
                <div class="lpx-topbar">
                    <div class="lpx-breadcrumb-container">
                        <ng-container *ngTemplateOutlet="breadcrumbPanel?.template || defaultBreadcrumb"></ng-container>
                    </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>

        <ng-container *ngTemplateOutlet="mobileNavbarPanel?.template || defaultMobileNavbar"></ng-container>

        <div class="lpx-toolbar-container">
            <lpx-toolbar-container></lpx-toolbar-container>
            <lpx-avatar></lpx-avatar>
            <lpx-settings></lpx-settings>
        </div>
    </div>
</ng-template>

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    LpxSideMenuLayoutModule
  ],
  providers: [APP_ROUTE_PROVIDER, { provide: LPX_AUTH_SERVICE_TOKEN, useClass: WpayAuthService }],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { ReplaceableComponentsService } from '@abp/ng.core';
import { Component } from '@angular/core';
import { eThemeLeptonXComponents } from '@volosoft/abp.ng.theme.lepton-x';
import { AppLayoutComponent } from './layout/app-layout.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private replacebleService: ReplaceableComponentsService) {
    this.replacebleService.add({
      key: eThemeLeptonXComponents.ApplicationLayout,
      component: AppLayoutComponent
    })
  }
}

Can you please let me know what I'm missing or share a sample code having an ApplicationLayout override as an example?

  • ABP Framework version: v7.1.1
  • UI type: Angular
  • DB provider: MongoDB
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

1 Answer(s)
  • User Avatar
    0
    mahmut.gundogdu created

    you can dowload the source code via cli. abp get-source Volo.Abp.LeptonXTheme.Pro run the code on your terminal (abp cli must be pre-installed)

    If you want to remove a component, you may use replace-component system. (replace with empty component) there is replacable key for almost all component you can check the docs https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35