diff --git a/docs/en/framework/ui/angular/lazy-load-service.md b/docs/en/framework/ui/angular/lazy-load-service.md
index 8dedddfe7c..339f0f656b 100644
--- a/docs/en/framework/ui/angular/lazy-load-service.md
+++ b/docs/en/framework/ui/angular/lazy-load-service.md
@@ -11,12 +11,13 @@ You do not have to provide the `LazyLoadService` at module or component level, b
 
 ```js
 import { LazyLoadService } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private lazyLoadService: LazyLoadService) {}
+  private lazyLoadService = inject(LazyLoadService);
 }
 ```
 
@@ -35,6 +36,7 @@ The first parameter of `load` method expects a `LoadingStrategy`. If you pass a
 
 ```js
 import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   template: `
@@ -42,11 +44,11 @@ import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
   `
 })
 class DemoComponent {
+  private lazyLoadService = inject(LazyLoadService);
+
   libraryLoaded$ = this.lazyLoadService.load(
     LOADING_STRATEGY.AppendAnonymousScriptToHead('/assets/some-library.js'),
   );
-
-  constructor(private lazyLoadService: LazyLoadService) {}
 }
 ```
 
@@ -64,6 +66,7 @@ If you pass a `StyleLoadingStrategy` instance as the first parameter of `load` m
 
 ```js
 import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
+import { inject } from '@angular/core';
 
 @Component({
   template: `
@@ -71,11 +74,11 @@ import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
   `
 })
 class DemoComponent {
+  private lazyLoadService = inject(LazyLoadService);
+
   stylesLoaded$ = this.lazyLoadService.load(
     LOADING_STRATEGY.AppendAnonymousStyleToHead('/assets/some-styles.css'),
   );
-
-  constructor(private lazyLoadService: LazyLoadService) {}
 }
 ```
 
@@ -114,7 +117,8 @@ A common usecase is **loading multiple scripts and/or styles before using a feat
 
 ```js
 import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
-import { frokJoin } from 'rxjs';
+import { forkJoin } from 'rxjs';
+import { inject } from '@angular/core';
 
 @Component({
   template: `
@@ -122,6 +126,8 @@ import { frokJoin } from 'rxjs';
   `
 })
 class DemoComponent {
+  private lazyLoad = inject(LazyLoadService);
+
   private stylesLoaded$ = forkJoin(
     this.lazyLoad.load(
       LOADING_STRATEGY.PrependAnonymousStyleToHead('/assets/library-dark-theme.css'),
@@ -141,8 +147,6 @@ class DemoComponent {
   );
 
   scriptsAndStylesLoaded$ = forkJoin(this.scriptsLoaded$, this.stylesLoaded$);
-
-  constructor(private lazyLoadService: LazyLoadService) {}
 }
 ```
 
@@ -156,6 +160,7 @@ Another frequent usecase is **loading dependent scripts in order**:
 ```js
 import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
 import { concat } from 'rxjs';
+import { inject } from '@angular/core';
 
 @Component({
   template: `
@@ -163,6 +168,8 @@ import { concat } from 'rxjs';
   `
 })
 class DemoComponent {
+  private lazyLoad = inject(LazyLoadService);
+
   scriptsLoaded$ = concat(
     this.lazyLoad.load(
       LOADING_STRATEGY.PrependAnonymousScriptToHead('/assets/library.js'),
@@ -171,8 +178,6 @@ class DemoComponent {
       LOADING_STRATEGY.AppendAnonymousScriptToHead('/assets/script-that-requires-library.js'),
     ),
   );
-
-  constructor(private lazyLoadService: LazyLoadService) {}
 }
 ```