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

12 Answer(s)

• 

  -1

  liangshiwei created 3 years ago

  Support Team Fullstack Developer

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

  Save Cancel
• 

  0

  murat.kebabci created 3 years ago

  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.

  Save Cancel
• 

  0

  Mehmet created 3 years ago

  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
  

  2. Import SettingManagementConfigModule to app.module.ts as shown below:

  import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';
  
  @NgModule({
    imports: [
      // ...
      SettingManagementConfigModule.forRoot(),
    ],
  })
  export class AppModule {}
  

  3. 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.

  Save Cancel
• 

  0

  murat.kebabci created 3 years ago

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

  Save Cancel
• 

  0

  Mehmet created 3 years ago

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

  Save Cancel
• 

  0

  murat.kebabci created 3 years ago

  Module

  Save Cancel
• 

  0

  murat.kebabci created 3 years ago

  ?

  Save Cancel
• 

  0

  Mehmet created 3 years ago

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

  Save Cancel
• 

  0

  murat.kebabci created 3 years ago

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

  Save Cancel
• 

  0

  Mehmet created 3 years ago

  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.

  2. 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,
        },
      ]);
    };
  }
  

  3. 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()
  ]
  // ...
  

  Save Cancel
• 

  0

  pooja created 3 years ago

  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.

  Save Cancel
• 

  0

  Mehmet created 3 years ago

  Hi @pooja

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

  Save Cancel

  1