Docs: Refactor dependency injection examples with inject() function - Issue 23270

docs/en/framework/ui/angular/abp-window-service.md

@@ -13,10 +13,9 @@ Firstly, ensure that the service is injected into the component or any other Ang
 
 ```js
 import { AbpWindowService } from '@abp/ng.core';
+import { inject } from '@angular/core';  
 
-constructor(private abpWindowService: AbpWindowService) { }
-// or
-// private abpWindowService   = inject(AbpWindowService)
+private abpWindowService = inject(AbpWindowService) 
 ```
 
 ### Downloading a Blob

docs/en/framework/ui/angular/component-replacement.md

@@ -13,13 +13,14 @@ Then, open the `app.component.ts` and execute the `add` method of `ReplaceableCo
 ```js
 import { ReplaceableComponentsService } from '@abp/ng.core'; // imported ReplaceableComponentsService
 import { eIdentityComponents } from '@abp/ng.identity'; // imported eIdentityComponents enum
+import { Component, inject } from '@angular/core';
 //...
 
 @Component(/* component metadata */)
 export class AppComponent {
-  constructor(
-    private replaceableComponents: ReplaceableComponentsService, // injected the service
-  ) {
+  private replaceableComponents = inject(ReplaceableComponentsService);
+
+  constructor() {
     this.replaceableComponents.add({
       component: YourNewRoleComponent,
       key: eIdentityComponents.Roles,
@@ -56,12 +57,13 @@ Open `app.component.ts` in `src/app` folder and modify it as shown below:
 import { ReplaceableComponentsService } from '@abp/ng.core'; // imported ReplaceableComponentsService
 import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents enum for component keys
 import { MyApplicationLayoutComponent } from './my-application-layout/my-application-layout.component'; // imported MyApplicationLayoutComponent
+import { Component, inject } from '@angular/core';
 
 @Component(/* component metadata */)
 export class AppComponent {
-  constructor(
-    private replaceableComponents: ReplaceableComponentsService, // injected the service
-  ) {
+  private replaceableComponents = inject(ReplaceableComponentsService);
+
+  constructor() {
     this.replaceableComponents.add({
       component: MyApplicationLayoutComponent,
       key: eThemeBasicComponents.ApplicationLayout,
@@ -268,15 +270,15 @@ import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeB
 
 @Component(/* component metadata */)
 export class AppComponent implements OnInit {
-  constructor(..., private replaceableComponents: ReplaceableComponentsService) {} // injected ReplaceableComponentsService
+  private replaceableComponents = inject(ReplaceableComponentsService);
 
   ngOnInit() {
     //...
 
     this.replaceableComponents.add({
-        component: LogoComponent,
-        key: eThemeBasicComponents.Logo,
-      });
+      component: LogoComponent,
+      key: eThemeBasicComponents.Logo,
+    });
   }
 }
 ```
@@ -454,15 +456,15 @@ import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeB
 
 @Component(/* component metadata */)
 export class AppComponent implements OnInit {
-  constructor(..., private replaceableComponents: ReplaceableComponentsService) {} // injected ReplaceableComponentsService
+  private replaceableComponents = inject(ReplaceableComponentsService);
 
   ngOnInit() {
     //...
 
     this.replaceableComponents.add({
-        component: RoutesComponent,
-        key: eThemeBasicComponents.Routes,
-      });
+      component: RoutesComponent,
+      key: eThemeBasicComponents.Routes,
+    });
   }
 }
 ```
@@ -493,7 +495,7 @@ import {
   SessionStateService,
   LocalizationPipe
 } from '@abp/ng.core';
-import { Component, Inject } from '@angular/core';
+import { Component, inject, Inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
@@ -512,9 +514,13 @@ import snq from 'snq';
   ]
 })
 export class NavItemsComponent {
+  private configState = inject(ConfigStateService);
+  private authService = inject(AuthService);
+  private sessionState = inject(SessionStateService);
+  @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile: any;
+
   currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser');
   selectedTenant$ = this.sessionState.getTenant$();
-
   languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages');
 
   get smallScreen(): boolean {
@@ -547,13 +553,6 @@ export class NavItemsComponent {
     return this.sessionState.getLanguage();
   }
 
-  constructor(
-    @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile,
-    private configState: ConfigStateService,
-    private authService: AuthService,
-    private sessionState: SessionStateService
-  ) {}
-
   onChangeLang(cultureName: string) {
     this.sessionState.setLanguage(cultureName);
   }
@@ -669,15 +668,15 @@ import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeB
 
 @Component(/* component metadata */)
 export class AppComponent implements OnInit {
-  constructor(..., private replaceableComponents: ReplaceableComponentsService) {} // injected ReplaceableComponentsService
+  private replaceableComponents = inject(ReplaceableComponentsService);
 
   ngOnInit() {
     //...
 
     this.replaceableComponents.add({
-        component: NavItemsComponent,
-        key: eThemeBasicComponents.NavItems,
-      });
+      component: NavItemsComponent,
+      key: eThemeBasicComponents.NavItems,
+    });
   }
 }
 ```

docs/en/framework/ui/angular/config-state-service.md

@@ -8,12 +8,13 @@ In order to use the `ConfigStateService` you must inject it in your class as a d
 
 ```js
 import { ConfigStateService } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
-   private config = inject(ConfigStateService);
+  private config = inject(ConfigStateService);
 }
 ```
 
@@ -126,10 +127,12 @@ You can get the application configuration response and set the `ConfigStateServi
 
 ```js
 import { AbpApplicationConfigurationService, ConfigStateService } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 private abpApplicationConfigurationService = inject(AbpApplicationConfigurationService);
 private config = inject(ConfigStateService);
 
+
 constructor() {
   this.abpApplicationConfigurationService.get({ includeLocalizationResources: false }).subscribe(config => {
     this.config.setState(config);

docs/en/framework/ui/angular/confirmation-service.md

@@ -8,12 +8,13 @@ You do not have to provide the `ConfirmationService` at component level, because
 
 ```js
 import { ConfirmationService } from '@abp/ng.theme.shared';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private confirmation: ConfirmationService) {}
+  private confirmation = inject(ConfirmationService);
 }
 ```
 
@@ -36,8 +37,10 @@ You can subscribe to the confirmation closing event like below:
 
 ```js
 import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
+import { inject } from '@angular/core';
 
-constructor(private confirmation: ConfirmationService) {}
+// inside the class:
+private confirmation = inject(ConfirmationService);
 
 this.confirmation
   .warn('::WillBeDeleted', { key: '::AreYouSure', defaultValue: 'Are you sure?' })
@@ -132,7 +135,10 @@ this.confirmation.clear();
 You can change icons with the `withConfirmationIcon()` method inside `provideAbpThemeShared` function in the app.config.ts. The changes will affect all confirmation popup in the project.
 
 ```ts
-import { provideAbpThemeShared, withConfirmationIcon } from '@abp/ng.theme.shared';
+import {
+  provideAbpThemeShared,
+  withConfirmationIcon,
+} from "@abp/ng.theme.shared";
 
 export const appConfig: ApplicationConfig = {
   providers: [

docs/en/framework/ui/angular/content-projection-service.md

@@ -8,12 +8,13 @@ You do not have to provide the `ContentProjectionService` at module or component
 
 ```js
 import { ContentProjectionService } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private contentProjectionService: ContentProjectionService) {}
+  private contentProjectionService = inject(ContentProjectionService);
 }
 ```
 

docs/en/framework/ui/angular/dom-insertion-service.md

@@ -8,12 +8,13 @@ You do not have to provide the `DomInsertionService` at module or component leve
 
 ```js
 import { DomInsertionService } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private domInsertionService: DomInsertionService) {}
+  private domInsertionService = inject(DomInsertionService);
 }
 ```
 
@@ -27,12 +28,13 @@ The first parameter of `insertContent` method expects a `ContentStrategy`. If yo
 
 ```js
 import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private domInsertionService: DomInsertionService) {}
+  private domInsertionService = inject(DomInsertionService);
 
   ngOnInit() {
     const scriptElement = this.domInsertionService.insertContent(
@@ -54,12 +56,13 @@ If you pass a `StyleContentStrategy` instance as the first parameter of `insertC
 
 ```js
 import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private domInsertionService: DomInsertionService) {}
+  private domInsertionService = inject(DomInsertionService);
 
   ngOnInit() {
     const styleElement = this.domInsertionService.insertContent(
@@ -81,15 +84,15 @@ If you pass the inserted `HTMLScriptElement` or `HTMLStyleElement` element as th
 
 ```js
 import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
+  private domInsertionService = inject(DomInsertionService);
   private styleElement: HTMLStyleElement;
 
-  constructor(private domInsertionService: DomInsertionService) {}
-
   ngOnInit() {
     this.styleElement = this.domInsertionService.insertContent(
       CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}')

docs/en/framework/ui/angular/environment.md

@@ -132,7 +132,8 @@ export const appConfig: ApplicationConfig = {
 In order to use the `EnvironmentService` you must inject it in your class as a dependency.
 
 ```js
-import { EnvironmentService } from '@abp/ng.core';
+import { EnvironmentService } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */

docs/en/framework/ui/angular/features.md

@@ -10,12 +10,13 @@ To use the `ConfigStateService`, you must inject it in your class as a dependenc
 
 ```js
 import { ConfigStateService } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private config: ConfigStateService) {}
+  private config = inject(ConfigStateService);
 }
 ```
 

docs/en/framework/ui/angular/global-features.md

@@ -9,14 +9,14 @@ The `ConfigStateService.getGlobalFeatures` API allows you to get the enabled fea
 ````js
 
 import { ConfigStateService } from '@abp/ng.core';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent implements OnInit {
-  constructor(private config: ConfigStateService) {}
- 
+  private config = inject(ConfigStateService);
+
   ngOnInit(): void {
     // Gets all enabled global features.
     const getGlobalFeatures = this.config.getGlobalFeatures();
@@ -44,4 +44,3 @@ class DemoComponent implements OnInit {
   }
 }
 
-