Manage Profile Page Tabs

manage profile page

The tabs in the manage profile page can be managed via ManageProfileTabsService which is exposed by the @volo/abp.ng.account/public/config package. You can add, remove, or edit a tab with using this service.

See the example below, covers all features:

// manage-profile-tabs.provider.ts

import { APP_INITIALIZER, Component } from "@angular/core";
import { TwoFactorTabComponent } from "@volo/abp.ng.account/public";
import {
  eAccountManageProfileTabNames,
  ManageProfileTabsService,
} from "@volo/abp.ng.account/public/config";
import { MyAwesomeTabComponent } from "./my-awesome-tab/my-awesome-tab.component";

@Component({
  standalone: true,
  selector: "abp-my-awesome-tab",
  template: `My Awesome Tab`,
})
class MyAwesomeTabComponent {}

export const MANAGE_PROFILE_TAB_PROVIDER = {
  provide: APP_INITIALIZER,
  useFactory: configureManageProfileTabs,
  deps: [ManageProfileTabsService],
  multi: true,
};

export function configureManageProfileTabs(tabs: ManageProfileTabsService) {
  return () => {
    tabs.add([
      {
        name: "::MyAwesomeTab", // supports localization keys
        order: 5,
        component: MyAwesomeTabComponent,
      },
    ]);

    tabs.patch(eAccountManageProfileTabNames.TwoFactor, {
      name: "Two factor authentication",
      component: TwoFactorTabComponent,
    });

    tabs.remove([eAccountManageProfileTabNames.ProfilePicture]);
  };
}
TypeScript
//app.module.ts

import { MANAGE_PROFILE_TAB_PROVIDER } from "./manage-profile-tabs.provider";

@NgModule({
  providers: [MANAGE_PROFILE_TAB_PROVIDER],
})
export class AppModule {}
TypeScript

What we have done above;

  • Created the manage-profile-page-tabs.provider.ts.
  • Determined the configureManageProfileTabs function to perform manage profile tabs actions.
    • Added a new tab labeled "My awesome tab".
    • Renamed the "Two factor" tab label.
    • Removed the "Profile picture" tab.
  • Determined the MANAGE_PROFILE_TAB_PROVIDER to be able to run the configureManageProfileTabs function on initialization.
  • Registered the MANAGE_PROFILE_TAB_PROVIDER to the AppModule providers.

See the result:

my awesome tab

Contributors


Last updated: August 12, 2024 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.

Community Talks

Deep Dive #1: Identity&Account Modules

17 Apr, 17:00
Online
Watch the Event
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
×