diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html index 9aa7c404d7..6ac22acb3b 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html +++ b/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" - > + /> - +

{{ @@ -32,7 +36,7 @@
- +
@@ -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" - > - + /> diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts index f0d8ae36e2..153621fe78 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts +++ b/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, - }); + readonly data = toSignal( + this.list.hookToQuery(query => this.service.getList(query)), + { + initialValue: { items: [], totalCount: 0 } as PagedResultDto, + }, + ); 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>('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); } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts index 9e55078c5d..94cedace13 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts +++ b/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], diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts index e87c55dd04..baa8ee0fa0 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts +++ b/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); -} \ No newline at end of file +} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts index c9897fed59..648c732f7b 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts +++ b/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], diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts index b1221468d9..6fe01e0991 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts +++ b/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], diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts index 2153ecf2c5..2609dec047 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts +++ b/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: ` `, imports: [RouterOutlet], diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts index ff526f608f..fe88597972 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts +++ b/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: ` @@ -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; } } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html index 0da02b7fe3..47270f67e6 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html @@ -1,10 +1,5 @@ -@if ((currentUser$ | async)?.isAuthenticated) { -
+@if (currentUser()?.isAuthenticated) { +
- @for (item of userMenu.items$ | async; track $index) { + @for (item of userMenuItems(); track $index) {
  • @if (item.component) { + /> } @else { @if (item.html) {
    @@ -56,7 +51,7 @@
    • } @else { - - {{ 'AbpAccount::Login' | abpLocalization }} - + + {{ 'AbpAccount::Login' | abpLocalization }} + } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts index c6540ba92a..10f17c0b05 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts +++ b/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 = 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 = (_, element) => element.id; get smallScreen(): boolean { diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts index 9832fdc705..554885da81 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts +++ b/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 }} + >{{ lang?.displayName }} + }
    diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts index 82d80bd30a..529a0d170b 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts +++ b/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], diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts index 3e5aa72d8a..736a9461b8 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts +++ b/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, diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts index 9ae2ac0c11..501c42b7bb 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts +++ b/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: [