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.

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<PagedAndSortedResultRequestDto>>(ListService);
+  protected readonly confirmationService = inject(ConfirmationService);
+  protected readonly injector = inject(Injector);
+  protected readonly service = inject(IdentityRoleService);
+
   data: PagedResultDto<IdentityRoleDto> = { 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<PagedAndSortedResultRequestDto>,
-    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 });
   }
 }

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
     });
   }
 }

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<boolean>();
 
   data: GetPermissionListResultDto = { groups: [], entityDisplayName: null };
-
   selectedGroup: PermissionGroupDto;
-
   permissions: PermissionGrantInfoDto[] = [];
-
   selectThisTab = false;
-
   selectAllTab = false;
-
   modalBusy = false;
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, 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({

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<UserMenu>(INJECTOR_PIPE_DATA_TOKEN);
 }
 
 @Component({/* component metadata */})

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,