Merge pull request #23010 from abpframework/fix/setting-management-tab-padding

Angular - Fixing the alignment for the setting tabs

npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html

@@ -24,9 +24,13 @@
           </div>
           <div class="col-12 col-md-9">
             @if (settings.length) {
-              <div class="tab-content">
-                <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
-                  <ng-container *ngComponentOutlet="selected.component"></ng-container>
+              <div class="tab-content pt-0">
+                <div
+                  class="tab-pane fade show active"
+                  [id]="selected.name + '-tab'"
+                  role="tabpanel"
+                >
+                  <ng-container *ngComponentOutlet="selected.component" />
                 </div>
               </div>
             }

npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts

@@ -1,6 +1,6 @@
 import { ABP } from '@abp/ng.core';
 import { SettingTabsService } from '@abp/ng.setting-management/config';
-import { Component, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -9,15 +9,15 @@ import { Subscription } from 'rxjs';
   templateUrl: './setting-management.component.html',
 })
 export class SettingManagementComponent implements OnDestroy, OnInit {
+  private settingTabsService = inject(SettingTabsService);
   private subscription = new Subscription();
+
   settings: ABP.Tab[] = [];
 
   selected!: ABP.Tab;
 
   trackByFn: TrackByFunction<ABP.Tab> = (_, item) => item.name;
 
-  constructor(private settingTabsService: SettingTabsService) {}
-
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }