Open Closed

Angular: How to use custom page tab settings in npm package migration 2.9.0 to 3.0.5? #366


User avatar
0
murat.kebabci created

Hi,

I am upgrading my npm package v2.9.0 to v3.0.5. I created custum settings page in service page.

addSettingTab({
  component: MySettingsComponents,
  name: 'SettingsMenu',
  order: 1
});

How can I use settings tab in my npm package? Custom page link

Old and new version is not working. Which page should use this module?

this.settingTabs.add([
      {
        component: MySettingsComponents,
        name: 'MySettingsComponents',
        order: 1,
      },
]);

12 Answer(s)
  • User Avatar
    -1
    liangshiwei created
    Support Team Fullstack Developer

    Are you using Angualr UI? Please see https://docs.abp.io/en/abp/latest/UI/Angular/Migration-Guide-v3.

  • User Avatar
    0
    murat.kebabci created

    Yes Angular UI but not contains my problem. I need how to use settings tab in npm package (for example your setting-management npm package)? Not dev app.

  • User Avatar
    0
    Mehmet created

    Hi @murat.kebabci

    Your dev-app must include the @abp/ng.setting-management package.

    How to install this package?
    1. Run the following command to install NPM package:
    yarn add @abp/ng.setting-management --tilde
    
    1. Import SettingManagementConfigModule to app.module.ts as shown below:
    import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';
    
    @NgModule({
      imports: [
        // ...
        SettingManagementConfigModule.forRoot(),
      ],
    })
    export class AppModule {}
    
    1. Add following path to app-routing.module.ts:
    const routes: Routes = [
      //...
      {
        path: 'setting-management',
        loadChildren: () =>
          import('@abp/ng.setting-management').then((m) => m.SettingManagementModule.forLazy()),
      },
    ];
    // ...
    

    Then you will access the setting-management page like below link:

    http://localhost:4200/setting-management

    If you cannot see the Setting Management navigation link on the menu, please check setting management page policy or make sure a custum setting page is registered.

    Please let me know if your issue is resolved.

  • User Avatar
    0
    murat.kebabci created

    Hi Mehmet,

    Thank you for your answer. But I want to know how to add new tab of Setting Management page from npm package.

    I used to use below block in service page.

    addSettingTab({ component: MySettingsComponents, name: 'SettingsMenu', order: 1 });

  • User Avatar
    0
    Mehmet created

    Which template you are using, module or app-pro?

  • User Avatar
    0
    murat.kebabci created

    Module

  • User Avatar
    0
    murat.kebabci created

    ?

  • User Avatar
    0
    Mehmet created

    Do you have route.provider.ts or your-module-name-config.service?

  • User Avatar
    0
    murat.kebabci created

    Yes. There is my menu but no settings tab. Below block is not working.

    export class MyModuleConfigService {
    constructor(
        private restService: RestService,
        private settingTabs: SettingTabsService
      ) {
        this.settingTabs.add([
          {
            component: MyModuleSettingsComponent,
            name: MyModuleSettingsName,
            order: 3,
          },
        ]);
      }
    
      getSettings(): Observable<void> {
        return this.restService.request<void, void>({
          method: 'GET',
          url: '/api/MyModuleConfig/Settings',
        });
      }
    }
    
  • User Avatar
    0
    Mehmet created
    1. You have to create a provider named setting-tab.provider.ts near to your-module-config.module.

    You can create a folder named providers in the same folder as YourPackageConfigModule.

    1. Fill the content of the new provider file like below:
    import { SettingTabsService } from '@abp/ng.core';
    import { APP_INITIALIZER } from '@angular/core';
    import { YourSettingsComponent } from '../components/your-settings.component';
    
    export const YOUR_MODULE_NAME_SETTING_TAB_PROVIDER = [
      {
        provide: APP_INITIALIZER,
        useFactory: configureSettingTabs,
        deps: [SettingTabsService],
        multi: true,
      },
    ];
    
    export function configureSettingTabs(settingtabs: SettingTabsService) {
      return () => {
        settingtabs.add([
          {
            name: 'YourModuleName.YourSettings',
            order: 1,
            requiredPolicy: 'permission key here',
            component: YourSettingsComponent,
          },
        ]);
      };
    }
    
    1. Open the YourPackageConfigModule and add new provider to forRoot's providers array like below:
    import { YOUR_MODULE_NAME_SETTING_TAB_PROVIDER } from './providers/setting-tab.provider';
    
    @NgModule(/* module metadata */)
    export class YourPackageConfigModule {
      static forRoot(): ModuleWithProviders<YourPackageConfigModule> {
        return {
          ngModule: YourPackageConfigModule,
          providers: [YOUR_MODULE_NAME_SETTING_TAB_PROVIDER],
        };
      }
    }
    

    The YourPackageConfigModule must be imported to the AppModule with calling the forRoot method

    //app.module.ts
    
    //...
    imports: [
    //...
    YourPackageConfigModule.forRoot()
    ]
    // ...
    
  • User Avatar
    0
    pooja created

    Hii Mehmet,

    How can i add new tab under exisitng setting page as shown in below image.I want to add new tab as a custom setting on click of that want show my new component. I am using app-pro template.

  • User Avatar
    0
    Mehmet created

    Hi @pooja

    Please create a new ticket and ask your question in detail.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15