Component Replacement

    The reason that you can replace but cannot customize default ABP components is disabling or changing a part of that component can cause problems. So we named those components as Replaceable Components.

    Create a new component that you want to use instead of an ABP component. Add that component to and entryComponents in the AppModule.

    Then, open the app.component.ts and dispatch the AddReplaceableComponent action to replace your component with an ABP component as shown below:

    Each ABP theme module has 3 layouts named ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent. These layouts can be replaced the same way.

    The example below describes how to replace the ApplicationLayoutComponent:

    Run the following command to generate a layout in angular folder:

    1. yarn ng generate component my-application-layout

    Add the following code in your layout template (my-layout.component.html) where you want the page to be loaded.

    1. <router-outlet></router-outlet>

    Open app.component.ts in src/app folder and modify it as shown below:

    1. import { AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
    2. import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents enum for component keys
    3. import { Store } from '@ngxs/store'; // imported Store
    4. import { MyApplicationLayoutComponent } from './my-application-layout/my-application-layout.component'; // imported MyApplicationLayoutComponent
    6. @Component(/* component metadata */)
    7. export class AppComponent {
    8.   constructor(
    9.     private store: Store, // injected Store
    10.   ) {
    11.     // dispatched the AddReplaceableComponent action
    12.     this.store.dispatch(
    13.       new AddReplaceableComponent({
    14.         component: MyApplicationLayoutComponent,
    15.         key: eThemeBasicComponents.ApplicationLayout,
    16.       }),
    17.     );
    18.   }
    19. }

    How to Replace LogoComponent

    Run the following command in angular folder to create a new component called LogoComponent.

    1. yarn ng generate component logo --inlineTemplate --inlineStyle --entryComponent
    3. # You don't need the --entryComponent option in Angular 9

    Open the generated logo.component.ts in src/app/logo folder and replace its content with the following:

    Open app.component.ts in src/app folder and modify it as shown below:

    1. import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
    2. import { Store } from '@ngxs/store'; // imported Store
    3. import { LogoComponent } from './logo/logo.component'; // imported NavItemsComponent
    4. import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents
    5. //...
    7. @Component(/* component metadata */)
    8. export class AppComponent implements OnInit {
    9.   constructor(..., private store: Store) {} // injected Store
    11.   ngOnInit() {
    12.     //...
    14.     // added dispatch
    15.     this.store.dispatch(
    16.       new AddReplaceableComponent({
    17.         component: LogoComponent,
    18.         key: eThemeBasicComponents.Logo,
    19.       }),
    20.     );
    21.   }
    22. }

    The final UI looks like below:

    New logo

    How to Replace RoutesComponent

    Run the following command in angular folder to create a new component called RoutesComponent.

    1. yarn ng generate component routes --entryComponent
    3. # You don't need the --entryComponent option in Angular 9

    Open the generated routes.component.ts in src/app/routes folder and replace its content with the following:

    1. import { ABP, ReplaceableComponents } from '@abp/ng.core';
    2. import {
    3.   Component,
    4.   HostBinding,
    5.   Inject,
    6.   Renderer2,
    7.   TrackByFunction,
    8.   AfterViewInit,
    9. } from '@angular/core';
    10. import { fromEvent } from 'rxjs';
    11. import { debounceTime } from 'rxjs/operators';
    13. @Component({
    14.   selector: 'app-routes',
    15.   templateUrl: 'routes.component.html',
    16. })
    17. export class RoutesComponent implements AfterViewInit {
    18.   @HostBinding('class.mx-auto')
    19.   marginAuto = true;
    21.   smallScreen = window.innerWidth < 992;
    23.   constructor(private renderer: Renderer2) {}
    25.   ngAfterViewInit() {
    26.     fromEvent(window, 'resize')
    27.       .pipe(debounceTime(150))
    28.       .subscribe(() => {
    29.         this.smallScreen = window.innerWidth < 992;
    30.       });
    31.   }
    32. }
    1. <ul class="navbar-nav">
    2.   <li class="nav-item">
    3.     <a class="nav-link" routerLink="/"
    4.       ><i class="fas fa-home"></i> {{ '::Menu:Home' | abpLocalization }}</a
    5.     >
    6.   </li>
    7.   <li class="nav-item">
    8.     <a class="nav-link" routerLink="/my-page"><i class="fas fa-newspaper mr-1"></i>My Page</a>
    9.   </li>
    10.   <li
    11.     #navbarRootDropdown
    12.     [abpVisibility]="routeContainer"
    13.     class="nav-item dropdown"
    14.     display="static"
    15.     (click)="
    16.       navbarRootDropdown.expand
    17.         ? (navbarRootDropdown.expand = false)
    18.         : (navbarRootDropdown.expand = true)
    19.     "
    20.   >
    21.     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
    22.       <i class="fas fa-wrench"></i>
    23.       {{ 'AbpUiNavigation::Menu:Administration' | abpLocalization }}
    25.     <div
    26.       #routeContainer
    27.       class="dropdown-menu border-0 shadow-sm"
    28.       (click)="$event.preventDefault(); $event.stopPropagation()"
    29.       [class.d-block]="smallScreen && navbarRootDropdown.expand"
    30.     >
    31.       <div
    32.         class="dropdown-submenu"
    33.         #dropdownSubmenu="ngbDropdown"
    34.         placement="right-top"
    35.         [autoClose]="true"
    36.         *abpPermission="'AbpIdentity.Roles || AbpIdentity.Users'"
    37.       >
    38.         <div ngbDropdownToggle [class.dropdown-toggle]="false">
    39.           <a
    40.             abpEllipsis="210px"
    41.             [abpEllipsisEnabled]="!smallScreen"
    42.             role="button"
    43.             class="btn d-block text-left dropdown-toggle"
    44.           >
    45.             <i class="fa fa-id-card-o"></i>
    46.             {{ 'AbpIdentity::Menu:IdentityManagement' | abpLocalization }}
    47.           </a>
    48.         </div>
    49.         <div
    50.           #childrenContainer
    51.           class="dropdown-menu border-0 shadow-sm"
    52.           [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
    53.         >
    54.           <div class="dropdown-submenu" *abpPermission="'AbpIdentity.Roles'">
    55.             <a class="dropdown-item" routerLink="/identity/roles">
    56.               {{ 'AbpIdentity::Roles' | abpLocalization }}</a
    57.             >
    58.           </div>
    59.           <div class="dropdown-submenu" *abpPermission="'AbpIdentity.Users'">
    60.             <a class="dropdown-item" routerLink="/identity/users">
    61.               {{ 'AbpIdentity::Users' | abpLocalization }}</a
    62.             >
    63.           </div>
    64.         </div>
    65.       </div>
    67.       <div
    68.         class="dropdown-submenu"
    69.         ngbDropdown
    70.         #dropdownSubmenu="ngbDropdown"
    71.         placement="right-top"
    72.         [autoClose]="true"
    73.         *abpPermission="'AbpTenantManagement.Tenants'"
    74.       >
    75.         <div ngbDropdownToggle [class.dropdown-toggle]="false">
    76.           <a
    77.             abpEllipsis="210px"
    78.             [abpEllipsisEnabled]="!smallScreen"
    79.             role="button"
    80.             class="btn d-block text-left dropdown-toggle"
    81.           >
    82.             <i class="fa fa-users"></i>
    83.             {{ 'AbpTenantManagement::Menu:TenantManagement' | abpLocalization }}
    84.           </a>
    85.         </div>
    86.         <div
    87.           #childrenContainer
    88.           class="dropdown-menu border-0 shadow-sm"
    89.           [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
    90.         >
    91.           <div class="dropdown-submenu" *abpPermission="'AbpTenantManagement.Tenants'">
    92.             <a class="dropdown-item" routerLink="/tenant-management/tenants">
    93.               {{ 'AbpTenantManagement::Tenants' | abpLocalization }}</a
    94.             >
    95.           </div>
    96.         </div>
    97.       </div>
    98.     </div>
    99.   </li>
    100. </ul>

    Open app.component.ts in src/app folder and modify it as shown below:

    The final UI looks like below:

    How to Replace NavItemsComponent

    Run the following command in angular folder to create a new component called NavItemsComponent.

    1. yarn ng generate component nav-items --entryComponent
    3. # You don't need the --entryComponent option in Angular 9

    Open the generated nav-items.component.ts in src/app/nav-items folder and replace the content with the following:

    1. import {
    2.   ApplicationConfiguration,
    3.   AuthService,
    4.   ConfigState,
    5.   SessionState,
    6.   SetLanguage,
    7. } from '@abp/ng.core';
    8. import { Component, AfterViewInit } from '@angular/core';
    9. import { Navigate, RouterState } from '@ngxs/router-plugin';
    10. import { Select, Store } from '@ngxs/store';
    11. import { Observable, fromEvent } from 'rxjs';
    12. import { map, debounceTime } from 'rxjs/operators';
    13. import snq from 'snq';
    15. @Component({
    16.   selector: 'app-nav-items',
    17.   templateUrl: 'nav-items.component.html',
    18. })
    19. export class NavItemsComponent implements AfterViewInit {
    20.   @Select(ConfigState.getOne('currentUser'))
    21.   currentUser$: Observable<ApplicationConfiguration.CurrentUser>;
    23.   @Select(ConfigState.getDeep('localization.languages'))
    24.   languages$: Observable<ApplicationConfiguration.Language[]>;
    26.   smallScreen = window.innerWidth < 992;
    28.   get defaultLanguage$(): Observable<string> {
    29.     return this.languages$.pipe(
    30.       map(
    31.         languages =>
    32.           snq(
    33.             () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName,
    34.           ),
    35.         '',
    36.       ),
    37.     );
    38.   }
    40.   get dropdownLanguages$(): Observable<ApplicationConfiguration.Language[]> {
    41.     return this.languages$.pipe(
    42.       map(
    43.         languages =>
    45.         [],
    46.       ),
    47.     );
    48.   }
    50.   get selectedLangCulture(): string {
    51.   }
    53.   constructor(private store: Store, private authService: AuthService) {}
    55.   ngAfterViewInit() {
    56.     fromEvent(window, 'resize')
    57.       .pipe(debounceTime(150))
    58.       .subscribe(() => {
    59.         this.smallScreen = window.innerWidth < 992;
    60.       });
    61.   }
    63.   onChangeLang(cultureName: string) {
    64.     this.store.dispatch(new SetLanguage(cultureName));
    65.   }
    67.   logout() {
    68.     this.authService.logout().subscribe(() => {
    69.       this.store.dispatch(
    70.         new Navigate(['/'], null, {
    71.           state: { redirectUrl: this.store.selectSnapshot(RouterState).state.url },
    72.         }),
    73.       );
    74.     });
    75.   }
    76. }

    Open the generated nav-items.component.html in src/app/nav-items folder and replace the content with the following:

    1. <ul class="navbar-nav">
    2.   <input type="search" placeholder="Search" class="bg-transparent border-0 text-white" />
    3.   <li *ngIf="(dropdownLanguages$ | async)?.length > 0" class="nav-item">
    4.     <div class="dropdown" ngbDropdown #languageDropdown="ngbDropdown" display="static">
    5.       <a
    6.         ngbDropdownToggle
    7.         class="nav-link"
    8.         href="javascript:void(0)"
    9.         role="button"
    10.         id="dropdownMenuLink"
    11.         data-toggle="dropdown"
    12.         aria-haspopup="true"
    13.         aria-expanded="false"
    14.       >
    15.         {{ defaultLanguage$ | async }}
    16.       </a>
    17.       <div
    18.         class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
    19.         aria-labelledby="dropdownMenuLink"
    20.         [class.d-block]="smallScreen && languageDropdown.isOpen()"
    21.       >
    22.         <a
    23.           *ngFor="let lang of dropdownLanguages$ | async"
    24.           href="javascript:void(0)"
    25.           class="dropdown-item"
    26.           (click)="onChangeLang(lang.cultureName)"
    27.           >{{ lang?.displayName }}</a
    28.         >
    29.       </div>
    30.     </div>
    31.   </li>
    33.   <li class="nav-item">
    34.     <ng-template #loginBtn>
    35.       <a role="button" class="nav-link" routerLink="/account/login">{{
    36.         'AbpAccount::Login' | abpLocalization
    37.       }}</a>
    38.     </ng-template>
    39.     <div
    40.       *ngIf="(currentUser$ | async)?.isAuthenticated; else loginBtn"
    41.       ngbDropdown
    42.       class="dropdown"
    43.       #currentUserDropdown="ngbDropdown"
    44.       display="static"
    45.     >
    46.       <a
    47.         ngbDropdownToggle
    48.         class="nav-link"
    49.         href="javascript:void(0)"
    50.         role="button"
    51.         id="dropdownMenuLink"
    52.         data-toggle="dropdown"
    53.         aria-haspopup="true"
    54.         aria-expanded="false"
    55.       >
    56.         {{ (currentUser$ | async)?.userName }}
    57.       </a>
    58.       <div
    59.         class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
    60.         aria-labelledby="dropdownMenuLink"
    61.         [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
    62.       >
    63.         <a class="dropdown-item" routerLink="/account/manage-profile"
    64.           ><i class="fa fa-cog mr-1"></i>{{ 'AbpAccount::ManageYourProfile' | abpLocalization }}</a
    65.         >
    66.         <a class="dropdown-item" href="javascript:void(0)" (click)="logout()"
    67.           ><i class="fa fa-power-off mr-1"></i>{{ 'AbpUi::Logout' | abpLocalization }}</a
    68.         >
    69.       </div>
    70.     </div>
    71.   </li>
    72. </ul>

    Open app.component.ts in src/app folder and modify it as shown below:

    1. import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
    2. import { Store } from '@ngxs/store'; // imported Store
    3. import { NavItemsComponent } from './nav-items/nav-items.component'; // imported NavItemsComponent
    4. import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents
    5. //...
    7. @Component(/* component metadata */)
    8. export class AppComponent implements OnInit {
    9.   constructor(..., private store: Store) {} // injected Store
    11.   ngOnInit() {
    12.     //...
    14.     // added dispatch
    15.     this.store.dispatch(
    16.       new AddReplaceableComponent({
    17.         component: NavItemsComponent,
    18.         key: eThemeBasicComponents.NavItems,
    19.       }),
    20.     );
    22. }

    The final UI looks like below:

    New nav-items