From 08c864b3f33a787741258d8f7802cf7336412fdc Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Tue, 8 Jul 2025 18:27:41 +0300
Subject: [PATCH] Update component-replacement.md

---
 .../ui/angular/component-replacement.md       | 53 +++++++++----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/docs/en/framework/ui/angular/component-replacement.md b/docs/en/framework/ui/angular/component-replacement.md
index aa9f66df1b..20fe50e426 100644
--- a/docs/en/framework/ui/angular/component-replacement.md
+++ b/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,
@@ -257,15 +259,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,
+    });
   }
 }
 ```
@@ -445,15 +447,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,
+    });
   }
 }
 ```
@@ -483,7 +485,7 @@ import {
   NAVIGATE_TO_MANAGE_PROFILE,
   SessionStateService,
 } from '@abp/ng.core';
-import { Component, Inject } from '@angular/core';
+import { Component, inject, Inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import snq from 'snq';
@@ -493,9 +495,13 @@ import snq from 'snq';
   templateUrl: 'nav-items.component.html',
 })
 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 {
@@ -528,13 +534,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);
   }
@@ -665,15 +664,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,
+    });
   }
 }
 ```