Override ApplicationLayout #4932

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:"