From 5da47ff38b4bf7448192b66b29da726cdc75d0bc Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Thu, 24 Jul 2025 13:10:12 +0300 Subject: [PATCH] Update Angular docs to use inject() for DI Refactored Angular documentation examples to use the inject() function for dependency injection instead of constructor injection. This aligns the docs with Angular's recommended DI approach and improves code clarity for service and component instantiation. --- ...aceable-components-work-with-extensions.md | 38 ++++++------ .../ui/angular/http-error-reporter-service.md | 13 +++-- ...ission-management-component-replacement.md | 58 +++++-------------- docs/en/framework/ui/angular/theming.md | 4 +- docs/en/modules/setting-management.md | 18 +++--- 5 files changed, 57 insertions(+), 74 deletions(-) diff --git a/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md b/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md index 11a7f6dfb8..3e6d9ab328 100644 --- a/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md +++ b/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md @@ -17,6 +17,10 @@ yarn ng generate component my-roles/my-roles --flat --export Open the generated `src/app/my-roles/my-roles.component.ts` file and replace its content with the following: ```js +import { Component, Injector, inject, OnInit } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { finalize } from 'rxjs/operators'; + import { ListService, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core'; import { eIdentityComponents, RolesComponent } from '@abp/ng.identity'; import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy'; @@ -27,9 +31,6 @@ import { FormPropData, generateFormFromProps } from '@abp/ng.components/extensible'; -import { Component, Injector, OnInit } from '@angular/core'; -import { FormGroup } from '@angular/forms'; -import { finalize } from 'rxjs/operators'; @Component({ selector: 'app-my-roles', @@ -40,13 +41,18 @@ import { finalize } from 'rxjs/operators'; provide: EXTENSIONS_IDENTIFIER, useValue: eIdentityComponents.Roles, }, - { - provide: RolesComponent, - useExisting: MyRolesComponent - } + { + provide: RolesComponent, + useExisting: MyRolesComponent, + }, ], }) export class MyRolesComponent implements OnInit { + public readonly list = inject>(ListService); + protected readonly confirmationService = inject(ConfirmationService); + protected readonly injector = inject(Injector); + protected readonly service = inject(IdentityRoleService); + data: PagedResultDto = { items: [], totalCount: 0 }; form: FormGroup; @@ -63,17 +69,10 @@ export class MyRolesComponent implements OnInit { permissionManagementKey = ePermissionManagementComponents.PermissionManagement; - onVisiblePermissionChange = event => { + onVisiblePermissionChange = (event) => { this.visiblePermissions = event; }; - constructor( - public readonly list: ListService, - protected confirmationService: ConfirmationService, - protected injector: Injector, - protected service: IdentityRoleService, - ) {} - ngOnInit() { this.hookToQuery(); } @@ -253,13 +252,18 @@ export class MyRolesModule {} As the last step, it is needs to be replaced the `RolesComponent` with the `MyRolesComponent`. Open the `app.component.ts` and modify its content as shown below: ```js +import { Component, inject } from '@angular/core'; import { ReplaceableComponentsService } from '@abp/ng.core'; import { eIdentityComponents } from '@abp/ng.identity'; import { MyRolesComponent } from './my-roles/my-roles.component'; -@Component(/* component metadata */) +@Component({ + // component metadata +}) export class AppComponent { - constructor(private replaceableComponents: ReplaceableComponentsService) { + private replaceableComponents = inject(ReplaceableComponentsService); + + constructor() { this.replaceableComponents.add({ component: MyRolesComponent, key: eIdentityComponents.Roles }); } } diff --git a/docs/en/framework/ui/angular/http-error-reporter-service.md b/docs/en/framework/ui/angular/http-error-reporter-service.md index 5e85fc95dc..e7f9a6f5a8 100644 --- a/docs/en/framework/ui/angular/http-error-reporter-service.md +++ b/docs/en/framework/ui/angular/http-error-reporter-service.md @@ -7,13 +7,14 @@ See the example below to learn how to report an error: ```ts import { HttpErrorReporterService } from '@abp/ng.core'; import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { of } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable() export class SomeService { - constructor(private http: HttpClient, private httpErrorReporter: HttpErrorReporterService) {} + private http = inject(HttpClient); + private httpErrorReporter = inject(HttpErrorReporterService); getData() { return this.http.get('http://example.com/get-data').pipe( @@ -31,17 +32,19 @@ See the following example to learn listening the reported errors: ```ts import { HttpErrorReporterService } from '@abp/ng.core'; import { HttpErrorResponse } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; @Injectable() export class MyErrorHandler { - constructor(private httpErrorReporter: HttpErrorReporterService) { + private httpErrorReporter = inject(HttpErrorReporterService); + + constructor() { this.handleErrors(); } handleErrors() { this.httpErrorReporter.reporter$.subscribe((err: HttpErrorResponse) => { - // handle the errors here + // handle the errors here }); } } diff --git a/docs/en/framework/ui/angular/permission-management-component-replacement.md b/docs/en/framework/ui/angular/permission-management-component-replacement.md index 677100381a..c6041cc784 100644 --- a/docs/en/framework/ui/angular/permission-management-component-replacement.md +++ b/docs/en/framework/ui/angular/permission-management-component-replacement.md @@ -19,7 +19,7 @@ import { import { LocaleDirection } from '@abp/ng.theme.shared'; import { Component, - EventEmitter, Inject, Input, Optional, Output, TrackByFunction + EventEmitter, Inject, inject, Input, Optional, Output, TrackByFunction } from '@angular/core'; import { of } from 'rxjs'; import { finalize, switchMap, tap } from 'rxjs/operators'; @@ -42,16 +42,18 @@ type PermissionWithStyle = PermissionGrantInfoDto & { }) export class PermissionManagementComponent implements - PermissionManagement.PermissionManagementComponentInputs, - PermissionManagement.PermissionManagementComponentOutputs { + PermissionManagement.PermissionManagementComponentInputs, + PermissionManagement.PermissionManagementComponentOutputs { + + private readonly service = inject(PermissionsService); + private readonly configState = inject(ConfigStateService); + protected _providerName: string; @Input() get providerName(): string { if (this.replaceableData) return this.replaceableData.inputs.providerName; - return this._providerName; } - set providerName(value: string) { this._providerName = value; } @@ -60,10 +62,8 @@ export class PermissionManagementComponent @Input() get providerKey(): string { if (this.replaceableData) return this.replaceableData.inputs.providerKey; - return this._providerKey; } - set providerKey(value: string) { this._providerKey = value; } @@ -72,10 +72,8 @@ export class PermissionManagementComponent @Input() get hideBadges(): boolean { if (this.replaceableData) return this.replaceableData.inputs.hideBadges; - return this._hideBadges; } - set hideBadges(value: boolean) { this._hideBadges = value; } @@ -85,7 +83,6 @@ export class PermissionManagementComponent get visible(): boolean { return this._visible; } - set visible(value: boolean) { if (value === this._visible) return; @@ -106,15 +103,10 @@ export class PermissionManagementComponent @Output() readonly visibleChange = new EventEmitter(); data: GetPermissionListResultDto = { groups: [], entityDisplayName: null }; - selectedGroup: PermissionGroupDto; - permissions: PermissionGrantInfoDto[] = []; - selectThisTab = false; - selectAllTab = false; - modalBusy = false; trackByFn: TrackByFunction = (_, item) => item.name; @@ -142,7 +134,6 @@ export class PermissionManagementComponent get isVisible(): boolean { if (!this.replaceableData) return this.visible; - return this.replaceableData.inputs.visible; } @@ -152,9 +143,7 @@ export class PermissionManagementComponent public replaceableData: ReplaceableComponents.ReplaceableTemplateData< PermissionManagement.PermissionManagementComponentInputs, PermissionManagement.PermissionManagementComponentOutputs - >, - private service: PermissionsService, - private configState: ConfigStateService + > ) {} getChecked(name: string) { @@ -162,17 +151,11 @@ export class PermissionManagementComponent } isGrantedByOtherProviderName(grantedProviders: ProviderInfoDto[]): boolean { - if (grantedProviders.length) { - return grantedProviders.findIndex(p => p.providerName !== this.providerName) > -1; - } - return false; + return grantedProviders?.some(p => p.providerName !== this.providerName); } onClickCheckbox(clickedPermission: PermissionGrantInfoDto, value) { - if ( - clickedPermission.isGranted && - this.isGrantedByOtherProviderName(clickedPermission.grantedProviders) - ) + if (clickedPermission.isGranted && this.isGrantedByOtherProviderName(clickedPermission.grantedProviders)) return; setTimeout(() => { @@ -184,7 +167,6 @@ export class PermissionManagementComponent } else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) { return { ...per, isGranted: true }; } - return per; }); @@ -255,16 +237,11 @@ export class PermissionManagementComponent this.setTabCheckboxState(); } - submit() { const unchangedPermissions = getPermissions(this.data.groups); - const changedPermissions: UpdatePermissionDto[] = this.permissions .filter(per => - unchangedPermissions.find(unchanged => unchanged.name === per.name).isGranted === - per.isGranted - ? false - : true, + unchangedPermissions.find(unchanged => unchanged.name === per.name).isGranted !== per.isGranted ) .map(({ name, isGranted }) => ({ name, isGranted })); @@ -321,26 +298,23 @@ export class PermissionManagementComponent this.replaceableData.outputs.visibleChange(visible); } } - + shouldFetchAppConfig() { const currentUser = this.configState.getOne('currentUser') as CurrentUserDto; if (this.providerName === 'R') return currentUser.roles.some(role => role === this.providerKey); - if (this.providerName === 'U') return currentUser.id === this.providerKey; return false; } } -function findMargin(permissions: PermissionGrantInfoDto[], permission: PermissionGrantInfoDto) { +function findMargin(permissions: PermissionGrantInfoDto[], permission: PermissionGrantInfoDto): number { const parentPermission = permissions.find(per => per.name === permission.parentName); - if (parentPermission && parentPermission.parentName) { let margin = 20; - return (margin += findMargin(permissions, parentPermission)); + return margin + findMargin(permissions, parentPermission); } - return parentPermission ? 20 : 0; } @@ -461,12 +435,12 @@ Open `app.component.ts` in `src/app` folder and modify it as shown below: ```js import { ReplaceableComponentsService } from '@abp/ng.core'; import { ePermissionManagementComponents } from '@abp/ng.permission-management'; -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { PermissionManagementComponent } from './permission-management/permission-management.component'; //... export class AppComponent implements OnInit { - constructor(private replaceableComponents: ReplaceableComponentsService) {} // injected ReplaceableComponentsService + private readonly replaceableComponents = inject(ReplaceableComponentsService); // injected ReplaceableComponentsService ngOnInit() { this.replaceableComponents.add({ diff --git a/docs/en/framework/ui/angular/theming.md b/docs/en/framework/ui/angular/theming.md index 177d87c382..70928bd16a 100644 --- a/docs/en/framework/ui/angular/theming.md +++ b/docs/en/framework/ui/angular/theming.md @@ -224,7 +224,7 @@ All of the options are shown below. You can choose either of them. ````ts import { eUserMenuItems } from '@abp/ng.theme.basic'; import { UserMenuService } from '@abp/ng.theme.shared'; -import { Component, inject, Inject } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { Router } from '@angular/router'; // make sure that you import this component in a NgModule @@ -239,7 +239,7 @@ import { Router } from '@angular/router'; }) export class UserMenuItemComponent { // you can inject the data through `INJECTOR_PIPE_DATA_TOKEN` token - constructor(@Inject(INJECTOR_PIPE_DATA_TOKEN) public data: UserMenu) {} + public data = inject(INJECTOR_PIPE_DATA_TOKEN); } @Component({/* component metadata */}) diff --git a/docs/en/modules/setting-management.md b/docs/en/modules/setting-management.md index 842233e8b4..7772e7f1f5 100644 --- a/docs/en/modules/setting-management.md +++ b/docs/en/modules/setting-management.md @@ -289,16 +289,18 @@ yarn ng generate component my-settings Open the `app.component.ts` and modify the file as shown below: ```js -import { Component } from '@angular/core'; -import { SettingTabsService } from '@abp/ng.setting-management/config'; // imported SettingTabsService -import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent +import { Component, inject } from '@angular/core'; +import { SettingTabsService } from '@abp/ng.setting-management/config'; +import { MySettingsComponent } from './my-settings/my-settings.component'; -@Component(/* component metadata */) +@Component({ + // component metadata +}) export class AppComponent { - constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent - { - // added below - settingTabs.add([ + private readonly settingTabs = inject(SettingTabsService); + + constructor() { + this.settingTabs.add([ { name: 'MySettings', order: 1,