update: some upgrade enhancements for the setting-management

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

@@ -98,7 +98,11 @@
   </form>
 }
 
-<abp-modal [(visible)]="isEmailTestModalOpen" [options]="modalSize">
+<abp-modal
+  [visible]="isEmailTestModalOpen()"
+  (visibleChange)="isEmailTestModalOpen.set($event)"
+  [options]="modalSize"
+>
   <ng-template #abpHeader>
     <h3>{{ 'AbpSettingManagement::SendTestEmail' | abpLocalization }}</h3>
   </ng-template>

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

@@ -5,7 +5,7 @@ import {
   ModalComponent,
   ToasterService,
 } from '@abp/ng.theme.shared';
-import { Component, inject, OnInit, signal } from '@angular/core';
+import { Component, inject, OnInit, signal, ChangeDetectionStrategy } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import {
   ReactiveFormsModule,
@@ -28,6 +28,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
 const { required, email } = Validators;
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-email-setting-group',
   templateUrl: 'email-setting-group.component.html',
   imports: [
@@ -53,11 +54,11 @@ export class EmailSettingGroupComponent implements OnInit {
 
   readonly form = signal<UntypedFormGroup | undefined>(undefined);
   readonly loading = signal(true);
+  readonly saving = signal(false);
+  readonly isEmailTestModalOpen = signal(false);
 
   emailTestForm!: UntypedFormGroup;
-  saving = false;
   emailingPolicy = SettingManagementPolicyNames.Emailing;
-  isEmailTestModalOpen = false;
   modalSize: NgbModalOptions = { size: 'lg' };
 
   ngOnInit() {
@@ -93,12 +94,12 @@ export class EmailSettingGroupComponent implements OnInit {
 
   submit() {
     const form = this.form();
-    if (!form || this.saving || form.invalid) return;
+    if (!form || this.saving() || form.invalid) return;
 
-    this.saving = true;
+    this.saving.set(true);
     this.emailSettingsService
       .update(form.value)
-      .pipe(finalize(() => (this.saving = false)))
+      .pipe(finalize(() => this.saving.set(false)))
       .subscribe(() => {
         this.toasterService.success('AbpSettingManagement::SavedSuccessfully');
         this.getData();
@@ -107,7 +108,7 @@ export class EmailSettingGroupComponent implements OnInit {
 
   openSendEmailModal() {
     this.buildEmailTestForm();
-    this.isEmailTestModalOpen = true;
+    this.isEmailTestModalOpen.set(true);
   }
 
   buildEmailTestForm() {
@@ -133,7 +134,7 @@ export class EmailSettingGroupComponent implements OnInit {
 
     this.emailSettingsService.sendTestEmail(this.emailTestForm.value).subscribe(() => {
       this.toasterService.success('AbpSettingManagement::SentSuccessfully');
-      this.isEmailTestModalOpen = false;
+      this.isEmailTestModalOpen.set(false);
     });
   }
 }

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

@@ -2,7 +2,7 @@
   <div id="SettingManagementWrapper">
     <div class="card">
       <div class="card-body">
-        @if (settings.length) {
+        @if (settings().length) {
           <div class="row" ngTabs>
             <div class="col-12 col-md-3 mb-2 mb-md-0">
               <div
@@ -10,14 +10,14 @@
                 id="nav-tab"
                 ngTabList
                 orientation="vertical"
-                [selectedTab]="selected?.name"
+                [selectedTab]="selected()?.name"
               >
-                <ng-container *abpFor="let setting of settings">
+                <ng-container *abpFor="let setting of settings()">
                   <button
                     ngTab
                     #tab="ngTab"
                     [value]="setting.name"
-                    (click)="selected = setting"
+                    (click)="selected.set(setting)"
                     class="nav-link text-start"
                     [class.active]="tab.selected()"
                     *abpPermission="setting.requiredPolicy"
@@ -28,7 +28,7 @@
               </div>
             </div>
             <div class="col-12 col-md-9">
-              <ng-container *abpFor="let setting of settings">
+              <ng-container *abpFor="let setting of settings()">
                 <div
                   ngTabPanel
                   [value]="setting.name"

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

@@ -1,12 +1,13 @@
+import { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';
+import { Tab as NgTab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
+import { NgComponentOutlet } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { ABP, ForDirective, LocalizationPipe, PermissionDirective } from '@abp/ng.core';
 import { SettingTabsService } from '@abp/ng.setting-management/config';
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { NgComponentOutlet } from '@angular/common';
 import { PageComponent } from '@abp/ng.components/page';
-import { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-setting-management',
   templateUrl: './setting-management.component.html',
   imports: [
@@ -17,7 +18,7 @@ import { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
     ForDirective,
     Tabs,
     TabList,
-    Tab,
+    NgTab,
     TabPanel,
     TabContent,
   ],
@@ -29,25 +30,18 @@ import { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
     `,
   ],
 })
-export class SettingManagementComponent implements OnDestroy, OnInit {
+export class SettingManagementComponent {
   private settingTabsService = inject(SettingTabsService);
-  private subscription = new Subscription();
 
-  settings: ABP.Tab[] = [];
+  readonly settings = toSignal(this.settingTabsService.visible$, { initialValue: [] });
+  readonly selected = signal<ABP.Tab | undefined>(undefined);
 
-  selected!: ABP.Tab;
-
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
-
-  ngOnInit() {
-    this.subscription.add(
-      this.settingTabsService.visible$.subscribe(settings => {
-        this.settings = settings;
-
-        if (!this.selected) this.selected = this.settings[0];
-      }),
-    );
+  constructor() {
+    effect(() => {
+      const settings = this.settings();
+      if (!this.selected() && settings.length) {
+        this.selected.set(settings[0] as ABP.Tab);
+      }
+    });
   }
 }