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 } 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';

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]);
  };
}
//app.module.ts

import { MANAGE_PROFILE_TAB_PROVIDER } from './manage-profile-tabs.provider';
import { MyAwesomeTabComponent } from './my-awesome-tab/my-awesome-tab.component';

@NgModule({
    //...
    declarations: [
        //...
        MyAwesomeTabComponent
    ],
    providers: [
        //...
        MANAGE_PROFILE_TAB_PROVIDER
    ]
})
export class AppModule {}

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: December 03, 2021 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

Building Modular Monolith Applications Using .NET and ABP Framework

17 Oct, 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