BLACK FRIDAY
From November 21
to December 02
99Days : 99Hrs : 99Min : 99Sec
SAVE UP TO$3K
Also valid for the
existing customers!
Version

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

In this document
Mastering ABP Framework Book
Mastering ABP Framework