From 0dc4df82965fb9db60fec2d0259d6592f7aedfe8 Mon Sep 17 00:00:00 2001
From: Kirk Larkin <6025110+serpent5@users.noreply.github.com>
Date: Tue, 23 Apr 2024 17:36:23 +0100
Subject: [PATCH] docs: Update di-in-action.md (#55489) PR Close #55489

---
 adev/src/content/guide/di/di-in-action.md | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/adev/src/content/guide/di/di-in-action.md b/adev/src/content/guide/di/di-in-action.md
index 57eee608e4b..19ef9a4460b 100644
--- a/adev/src/content/guide/di/di-in-action.md
+++ b/adev/src/content/guide/di/di-in-action.md
@@ -5,7 +5,7 @@ This guide explores additional features of dependency injection in Angular.
 ## Custom providers with `@Inject`
 
 Using a custom provider allows you to provide a concrete implementation for implicit dependencies, such as built-in browser APIs.
-The following example uses an `InjectionToken` to provide the [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) browser API as a dependency in the `BrowserStorageService`.
+The following example uses an `InjectionToken` to provide the [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) browser API as a dependency in the `BrowserStorageService`:
 
 <docs-code header="src/app/storage.service.ts" language="typescript"
            highlight="[[3,6],[12]]">
@@ -32,8 +32,8 @@ export class BrowserStorageService {
 }
 </docs-code>
 
-The `factory` function returns the `localStorage` property that is attached to the browser window object.
-The `Inject` decorator is a constructor parameter used to specify a custom provider of a dependency.
+The `factory` function returns the `localStorage` property that is attached to the browser's window object.
+The `Inject` decorator is applied to the `storage` constructor parameter and specifies a custom provider of the dependency.
 
 This custom provider can now be overridden during testing with a mock API of `localStorage` instead of interacting with real browser APIs.
 
@@ -42,7 +42,7 @@ This custom provider can now be overridden during testing with a mock API of `lo
 Although developers strive to avoid it, some visual effects and third-party tools require direct DOM access.
 As a result, you might need to access a component's DOM element.
 
-Angular exposes the underlying element of a `@Component` or `@Directive` via injection using the `ElementRef` injection token.
+Angular exposes the underlying element of a `@Component` or `@Directive` via injection using the `ElementRef` injection token:
 
 <docs-code language="typescript" highlight="[7]">
 import { Directive, ElementRef } from '@angular/core';
@@ -66,14 +66,13 @@ You can't refer directly to a class until it's been defined.
 
 This isn't usually a problem, especially if you adhere to the recommended *one class per file* rule.
 But sometimes circular references are unavoidable.
-For example, when class 'A' refers to class 'B' and 'B' refers to 'A'.
-One of them has to be defined first.
+For example, when class 'A' refers to class 'B' and 'B' refers to 'A', one of them has to be defined first.
 
 The Angular `forwardRef()` function creates an *indirect* reference that Angular can resolve later.
 
 You face a similar problem when a class makes *a reference to itself*.
-For example in its `providers` array.
-The `providers` array is a property of the `@Component()` decorator function which must appear before the class definition.
+For example, in its `providers` array.
+The `providers` array is a property of the `@Component()` decorator function, which must appear before the class definition.
 You can break such circular references by using `forwardRef`.
 
 <docs-code header="app.component.ts" language="typescript" highlight="[4]">