update: some upgrade enhancements for the tenant-management and theme basic

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

@@ -16,11 +16,15 @@
         [data]="data().items"
         [recordsTotal]="data().totalCount"
         [list]="list"
-      ></abp-extensible-table>
+      />
     </div>
   </div>
 
-  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+  <abp-modal
+    [visible]="isModalVisible()"
+    (visibleChange)="isModalVisible.set($event)"
+    [busy]="modalBusy()"
+  >
     <ng-template #abpHeader>
       <h3>
         {{
@@ -32,7 +36,7 @@
 
     <ng-template #abpBody>
       <form [formGroup]="tenantForm" (ngSubmit)="save()" [validateOnSubmit]="true">
-        <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+        <abp-extensible-form [selectedRecord]="selected" />
       </form>
     </ng-template>
 
@@ -51,14 +55,14 @@
       inputs: {
         providerName: { value: 'T' },
         providerKey: { value: providerKey },
-        visible: { value: visibleFeatures, twoWay: true }
+        visible: { value: visibleFeatures(), twoWay: true },
       },
       outputs: { visibleChange: $any(onVisibleFeaturesChange) },
-      componentKey: featureManagementKey
+      componentKey: featureManagementKey,
     }"
-    [(visible)]="visibleFeatures"
+    [visible]="visibleFeatures()"
+    (visibleChange)="visibleFeatures.set($event)"
     providerName="T"
     [providerKey]="providerKey"
-  >
-  </abp-feature-management>
+  />
 </abp-page>

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

@@ -1,3 +1,22 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DOCUMENT,
+  inject,
+  Injector,
+  makeStateKey,
+  signal,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
+import { finalize } from 'rxjs/operators';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+
 import {
   ListService,
   LocalizationPipe,
@@ -24,20 +43,11 @@ import {
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
-import { Component, DOCUMENT, inject, Injector, makeStateKey } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import {
-  FormsModule,
-  ReactiveFormsModule,
-  UntypedFormBuilder,
-  UntypedFormGroup,
-} from '@angular/forms';
-import { finalize } from 'rxjs/operators';
-import { eTenantManagementComponents } from '../../enums/components';
 import { PageComponent } from '@abp/ng.components/page';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { eTenantManagementComponents } from '../../enums/components';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
   providers: [
@@ -71,22 +81,23 @@ export class TenantsComponent {
   private readonly injector = inject(Injector);
   private document = inject(DOCUMENT);
 
-  readonly data = toSignal(this.list.hookToQuery(query => this.service.getList(query)), {
-    initialValue: { items: [], totalCount: 0 } as PagedResultDto<TenantDto>,
-  });
+  readonly data = toSignal(
+    this.list.hookToQuery(query => this.service.getList(query)),
+    {
+      initialValue: { items: [], totalCount: 0 } as PagedResultDto<TenantDto>,
+    },
+  );
 
   selected!: TenantDto;
 
   tenantForm!: UntypedFormGroup;
 
-  isModalVisible!: boolean;
-
-  visibleFeatures = false;
+  readonly isModalVisible = signal(false);
+  readonly visibleFeatures = signal(false);
+  readonly modalBusy = signal(false);
 
   providerKey!: string;
 
-  modalBusy = false;
-
   featureManagementKey = eFeatureManagementComponents.FeatureManagement;
   TENANTS_KEY = makeStateKey<PagedResultDto<TenantDto>>('tenants');
 
@@ -95,7 +106,7 @@ export class TenantsComponent {
   }
 
   onVisibleFeaturesChange = (value: boolean) => {
-    this.visibleFeatures = value;
+    this.visibleFeatures.set(value);
   };
 
   private createTenantForm() {
@@ -106,20 +117,20 @@ export class TenantsComponent {
   addTenant() {
     this.selected = {} as TenantDto;
     this.createTenantForm();
-    this.isModalVisible = true;
+    this.isModalVisible.set(true);
   }
 
   editTenant(id: string) {
     this.service.get(id).subscribe(res => {
       this.selected = res;
       this.createTenantForm();
-      this.isModalVisible = true;
+      this.isModalVisible.set(true);
     });
   }
 
   save() {
-    if (!this.tenantForm.valid || this.modalBusy) return;
-    this.modalBusy = true;
+    if (!this.tenantForm.valid || this.modalBusy()) return;
+    this.modalBusy.set(true);
 
     const { id } = this.selected;
 
@@ -127,9 +138,9 @@ export class TenantsComponent {
       ? this.service.update(id, { ...this.selected, ...this.tenantForm.value })
       : this.service.create(this.tenantForm.value)
     )
-      .pipe(finalize(() => (this.modalBusy = false)))
+      .pipe(finalize(() => this.modalBusy.set(false)))
       .subscribe(() => {
-        this.isModalVisible = false;
+        this.isModalVisible.set(false);
         this.toasterService.success('AbpUi::SavedSuccessfully');
         this.list.get();
       });
@@ -168,7 +179,7 @@ export class TenantsComponent {
   openFeaturesModal(providerKey: string) {
     this.providerKey = providerKey;
     setTimeout(() => {
-      this.visibleFeatures = true;
+      this.visibleFeatures.set(true);
     }, 0);
   }
 

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, inject } from '@angular/core';
+import { AfterViewInit, Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core';
 import { LayoutService } from '../../services/layout.service';
 import { NgTemplateOutlet } from '@angular/common';
@@ -9,6 +9,7 @@ import { AuthWrapperComponent } from './auth-wrapper/auth-wrapper.component';
 import { PageAlertContainerComponent } from '../page-alert-container/page-alert-container.component';
 import { RouterOutlet } from '@angular/router';
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-layout-account',
   templateUrl: './account-layout.component.html',
   providers: [LayoutService, SubscriptionService],

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts

@@ -1,10 +1,11 @@
 import { AuthWrapperService } from '@abp/ng.account.core';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
 import { TenantBoxComponent } from '../tenant-box/tenant-box.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-auth-wrapper',
   templateUrl: './auth-wrapper.component.html',
   providers: [AuthWrapperService],
@@ -12,4 +13,4 @@ import { TenantBoxComponent } from '../tenant-box/tenant-box.component';
 })
 export class AuthWrapperComponent {
   service = inject(AuthWrapperService);
-}
+}

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts

@@ -1,11 +1,12 @@
 import { TenantBoxService } from '@abp/ng.account.core';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { LocalizationPipe } from '@abp/ng.core';
 import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared';
 import { FormsModule } from '@angular/forms';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-tenant-box',
   templateUrl: './tenant-box.component.html',
   providers: [TenantBoxService],

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts

@@ -1,5 +1,5 @@
 import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core';
-import { AfterViewInit, Component, inject } from '@angular/core';
+import { AfterViewInit, Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { LayoutService } from '../../services/layout.service';
 import { NgTemplateOutlet } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
@@ -9,6 +9,7 @@ import { RoutesComponent } from '../routes/routes.component';
 import { NavItemsComponent } from '../nav-items/nav-items.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-layout-application',
   templateUrl: './application-layout.component.html',
   providers: [LayoutService, SubscriptionService],

npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { eLayoutType } from '@abp/ng.core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-layout-empty',
   template: ` <router-outlet></router-outlet> `,
   imports: [RouterOutlet],

npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts

@@ -1,9 +1,10 @@
 import { EnvironmentService } from '@abp/ng.core';
 import { RouterLink } from '@angular/router';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN } from '@abp/ng.theme.shared';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-logo',
   template: `
     <a class="navbar-brand" routerLink="/">
@@ -24,14 +25,10 @@ export class LogoComponent {
   private readonly providedAppName = inject(LOGO_APP_NAME_TOKEN, { optional: true });
 
   get logoUrl(): string {
-    return (
-      this.providedLogoUrl ?? this.environment.getEnvironment().application?.logoUrl
-    );
+    return this.providedLogoUrl ?? this.environment.getEnvironment().application?.logoUrl;
   }
 
   get appName(): string {
-    return (
-      this.providedAppName ?? this.environment.getEnvironment().application?.name
-    );
+    return this.providedAppName ?? this.environment.getEnvironment().application?.name;
   }
 }

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html

@@ -1,10 +1,5 @@
-@if ((currentUser$ | async)?.isAuthenticated) {
-  <div
-    ngbDropdown
-    class="dropdown"
-    #currentUserDropdown="ngbDropdown"
-    display="static"
-  >
+@if (currentUser()?.isAuthenticated) {
+  <div ngbDropdown class="dropdown" #currentUserDropdown="ngbDropdown" display="static">
     <a
       ngbDropdownToggle
       class="nav-link"
@@ -15,27 +10,27 @@
       aria-haspopup="true"
       aria-expanded="false"
     >
-      @if ((selectedTenant$ | async)?.name; as tenantName) {
+      @if (selectedTenant()?.name; as tenantName) {
         <small
           ><i>{{ tenantName }}</i
           >\</small
         >
       }
-      <strong>{{ (currentUser$ | async)?.userName }}</strong>
+      <strong>{{ currentUser()?.userName }}</strong>
     </a>
     <div
       class="dropdown-menu dropdown-menu-end border-0 shadow-sm"
       aria-labelledby="dropdownMenuLink"
       [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
     >
-      @for (item of userMenu.items$ | async; track $index) {
+      @for (item of userMenuItems(); track $index) {
         <ng-container *abpVisible="!item.visible || item.visible(item)">
           <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
             @if (item.component) {
               <ng-container
                 [ngComponentOutlet]="item.component"
                 [ngComponentOutletInjector]="item | toInjector"
-              ></ng-container>
+              />
             } @else {
               @if (item.html) {
                 <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
@@ -56,7 +51,7 @@
     </div>
   </div>
 } @else {
-    <a role="button" class="nav-link pointer" (click)="navigateToLogin()">
-      {{ 'AbpAccount::Login' | abpLocalization }}
-    </a>
+  <a role="button" class="nav-link pointer" (click)="navigateToLogin()">
+    {{ 'AbpAccount::Login' | abpLocalization }}
+  </a>
 }

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts

@@ -9,17 +9,17 @@ import {
   ToInjectorPipe,
 } from '@abp/ng.core';
 import { AbpVisibleDirective, UserMenu, UserMenuService } from '@abp/ng.theme.shared';
-import { Component, TrackByFunction, inject } from '@angular/core';
-import { Observable } from 'rxjs';
-import { NgComponentOutlet, AsyncPipe, DOCUMENT } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, TrackByFunction } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { DOCUMENT, NgComponentOutlet } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-current-user',
   templateUrl: './current-user.component.html',
   imports: [
     NgComponentOutlet,
-    AsyncPipe,
     NgbDropdownModule,
     AbpVisibleDirective,
     PermissionDirective,
@@ -35,8 +35,12 @@ export class CurrentUserComponent {
   private sessionState = inject(SessionStateService);
   private document = inject(DOCUMENT);
 
-  currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser');
-  selectedTenant$ = this.sessionState.getTenant$();
+  readonly currentUser = toSignal(this.configState.getOne$('currentUser'), {
+    initialValue: {} as CurrentUserDto,
+  });
+  readonly selectedTenant = toSignal(this.sessionState.getTenant$());
+  readonly userMenuItems = toSignal(this.userMenu.items$, { initialValue: [] as UserMenu[] });
+
   trackByFn: TrackByFunction<UserMenu> = (_, element) => element.id;
 
   get smallScreen(): boolean {

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts

@@ -1,11 +1,12 @@
 import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { DOCUMENT, AsyncPipe } from '@angular/common';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-languages',
   template: `
     @if (((dropdownLanguages$ | async)?.length || 0) > 0) {
@@ -32,8 +33,8 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
               href="javascript:void(0)"
               class="dropdown-item"
               (click)="onChangeLang(lang.cultureName || '')"
-              >{{ lang?.displayName }}</a
-            >
+              >{{ lang?.displayName }}
+            </a>
           }
         </div>
       </div>

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts

@@ -1,9 +1,10 @@
 import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared';
-import { Component, TrackByFunction, inject, PLATFORM_ID } from '@angular/core';
+import {Component, TrackByFunction, inject, PLATFORM_ID, ChangeDetectionStrategy,} from '@angular/core';
 import { NgComponentOutlet, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-nav-items',
   templateUrl: 'nav-items.component.html',
   imports: [NgComponentOutlet, AsyncPipe, AbpVisibleDirective, PermissionDirective, ToInjectorPipe],

npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts

@@ -1,9 +1,10 @@
-import { Component, ViewEncapsulation, inject } from '@angular/core';
+import {Component, ViewEncapsulation, inject, ChangeDetectionStrategy,} from '@angular/core';
 import { PageAlertService } from '@abp/ng.theme.shared';
 import { AsyncPipe } from '@angular/common';
 import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-page-alert-container',
   templateUrl: './page-alert-container.component.html',
   encapsulation: ViewEncapsulation.None,

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts

@@ -7,21 +7,20 @@ import {
   RoutesService,
   TreeNode,
 } from '@abp/ng.core';
-import {
-  Component,
+import {Component,
   ElementRef,
   inject,
   Renderer2,
   TrackByFunction,
   input,
-  viewChildren
-} from '@angular/core';
+  viewChildren, ChangeDetectionStrategy,} from '@angular/core';
 import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { RouterLink } from '@angular/router';
 import { EllipsisDirective } from '@abp/ng.theme.shared';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-routes',
   templateUrl: 'routes.component.html',
   imports: [