Component Replacement

You can replace some ABP components with your custom components.

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.

How to Replace a Component

Create a new component that you want to use instead of an ABP component. Add that component to declarations 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:

import { ..., AddReplaceableComponent } from '@abp/ng.core';
export class AppComponent {
  constructor(..., private store: Store) {}

  ngOnInit() {
    this.store.dispatch(
      new AddReplaceableComponent({
        component: YourNewRoleComponent,
        key: 'Identity.RolesComponent',
      }),
    );
    //...
  }
}

Example Usage

Available Replaceable Components

Component key Description
Account.LoginComponent Login page
Account.RegisterComponent Register page
Account.ManageProfileComponent Manage Profile page
Account.AuthWrapperComponent This component wraps register and login pages
Account.ChangePasswordComponent Change password form
Account.PersonalSettingsComponent Personal settings form
Account.TenantBoxComponentInputs Tenant changing box
FeatureManagement.FeatureManagementComponent Features modal
Identity.UsersComponent Users page
Identity.RolesComponent Roles page
PermissionManagement.PermissionManagementComponent Permissions modal
SettingManagement.SettingManagementComponent Setting Management page
TenantManagement.TenantsComponent Tenants page

What's Next?

Contributors


Last updated: March 12, 2020 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

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
Community Talks

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
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.

Learn More