docs: align lightweight injection tokens with the style guide

Author: SkyZeroZx

adev/src/content/guide/di/lightweight-injection-tokens.md

@@ -38,36 +38,36 @@ import {Component, contentChild} from '@angular/core';
   selector: 'lib-header',
   …,
 })
-class LibHeaderComponent {}
+class LibHeader {}
 
 @Component({
   selector: 'lib-card',
   …,
 })
-class LibCardComponent {
-  readonly header = contentChild(LibHeaderComponent);
+class LibCard {
+  readonly header = contentChild(LibHeader);
 }
 ```
 
 Because `<lib-header>` is optional, the element can appear in the template in its minimal form, `<lib-card />`.
 In this case, `<lib-header>` is not used and you would expect it to be tree-shaken, but that is not what happens.
-This is because `LibCardComponent` actually contains two references to the `LibHeaderComponent`:
+This is because `LibCard` actually contains two references to the `LibHeader`:
 
 ```ts
-readonly header = contentChild(LibHeaderComponent);
+readonly header = contentChild(LibHeader);
 ```
 
-- One of these reference is in the _type position_-- that is, it specifies `LibHeaderComponent` as a type: `readonly header: Signal<LibHeaderComponent|undefined>`.
-- The other reference is in the _value position_-- that is, `LibHeaderComponent` is the value passed into the `contentChild` function: `contentChild(LibHeaderComponent)`.
+- One of these reference is in the _type position_-- that is, it specifies `LibHeader` as a type: `readonly header: Signal<LibHeader|undefined>`.
+- The other reference is in the _value position_-- that is, `LibHeader` is the value passed into the `contentChild` function: `contentChild(LibHeader)`.
 
 The compiler handles token references in these positions differently:
 
 - The compiler erases _type position_ references after conversion from TypeScript, so they have no impact on tree-shaking.
 - The compiler must keep _value position_ references at runtime, which **prevents** the component from being tree-shaken.
 
-In the example, the compiler retains the `LibHeaderComponent` token that occurs in the value position.
+In the example, the compiler retains the `LibHeader` token that occurs in the value position.
 This prevents the referenced component from being tree-shaken, even if the application does not actually use `<lib-header>` anywhere.
-If `LibHeaderComponent` 's code, template, and styles combine to become too large, including it unnecessarily can significantly increase the size of the client application.
+If `LibHeader` 's code, template, and styles combine to become too large, including it unnecessarily can significantly increase the size of the client application.
 
 ## When to use the lightweight injection token pattern
 
@@ -77,18 +77,18 @@ There are two cases when that can happen:
 - The token is used in the value position of a [content query](guide/components/queries#content-queries).
 - The token is used with the `inject` function.
 
-In the following example, both uses of the `OtherComponent` token cause retention of `OtherComponent`, preventing it from being tree-shaken when it is not used:
+In the following example, both uses of the `CustomOther` token cause retention of `CustomOther`, preventing it from being tree-shaken when it is not used:
 
 ```ts {highlight: [[2],[4]]}
-class MyComponent {
-  private readonly other = inject(OtherComponent, {optional: true});
+class App {
+  private readonly other = inject(CustomOther, {optional: true});
 
-  readonly header = contentChild(OtherComponent);
+  readonly header = contentChild(CustomOther);
 }
 ```
 
 Although tokens used only as type specifiers are removed when converted to JavaScript, all tokens used for dependency injection are needed at runtime.
-When using `inject(OtherComponent)`, `OtherComponent` is passed as a value argument.
+When using `inject(CustomOther)`, `CustomOther` is passed as a value argument.
 The token is now in a value position, which causes the tree-shaker to keep the reference.
 
 HELPFUL: Libraries should use [tree-shakable providers](guide/di/dependency-injection#providing-dependency) for all services, providing dependencies at the root level rather than in components or modules.
@@ -98,33 +98,33 @@ HELPFUL: Libraries should use [tree-shakable providers](guide/di/dependency-inje
 The lightweight injection token design pattern consists of using a small abstract class as an injection token, and providing the actual implementation at a later stage.
 The abstract class is retained, not tree-shaken, but it is small and has no material impact on the application size.
 
-The following example shows how this works for the `LibHeaderComponent`:
+The following example shows how this works for the `LibHeader`:
 
 ```ts {highlight: [[1],[5], [15]]}
 abstract class LibHeaderToken {}
 
 @Component({
   selector: 'lib-header',
-  providers: [{provide: LibHeaderToken, useExisting: LibHeaderComponent}],
+  providers: [{provide: LibHeaderToken, useExisting: LibHeader}],
   …,
 })
-class LibHeaderComponent extends LibHeaderToken {}
+class LibHeader extends LibHeaderToken {}
 
 @Component({
   selector: 'lib-card',
   …,
 })
-class LibCardComponent {
+class LibCard {
   readonly header = contentChild(LibHeaderToken);
 }
 ```
 
-In this example, the `LibCardComponent` implementation no longer refers to `LibHeaderComponent` in either the type position or the value position.
-This lets full tree-shaking of `LibHeaderComponent` take place.
+In this example, the `LibCard` implementation no longer refers to `LibHeader` in either the type position or the value position.
+This lets full tree-shaking of `LibHeader` take place.
 The `LibHeaderToken` is retained, but it is only a class declaration, with no concrete implementation.
 It is small and does not materially impact the application size when retained after compilation.
 
-Instead, `LibHeaderComponent` itself implements the abstract `LibHeaderToken` class.
+Instead, `LibHeader` itself implements the abstract `LibHeaderToken` class.
 You can safely use that token as the provider in the component definition, allowing Angular to correctly inject the concrete type.
 
 To summarize, the lightweight injection token pattern consists of the following:
@@ -141,8 +141,8 @@ The token is now an abstract class. Since the injectable component implements th
 The implementation of the method, with all its code overhead, resides in the injectable component that can be tree-shaken.
 This lets the parent communicate with the child, if it is present, in a type-safe manner.
 
-For example, the `LibCardComponent` now queries `LibHeaderToken` rather than `LibHeaderComponent`.
-The following example shows how the pattern lets `LibCardComponent` communicate with the `LibHeaderComponent` without actually referring to `LibHeaderComponent`:
+For example, the `LibCard` now queries `LibHeaderToken` rather than `LibHeader`.
+The following example shows how the pattern lets `LibCard` communicate with the `LibHeader` without actually referring to `LibHeader`:
 
 ```ts {highlight: [[2],[9],[11],[19]]}
 abstract class LibHeaderToken {
@@ -151,9 +151,9 @@ abstract class LibHeaderToken {
 
 @Component({
   selector: 'lib-header',
-  providers: [{provide: LibHeaderToken, useExisting: LibHeaderComponent}],
+  providers: [{provide: LibHeaderToken, useExisting: LibHeader}],
 })
-class LibHeaderComponent extends LibHeaderToken {
+class LibHeader extends LibHeaderToken {
   doSomething(): void {
     // Concrete implementation of `doSomething`
   }
@@ -162,7 +162,7 @@ class LibHeaderComponent extends LibHeaderToken {
 @Component({
   selector: 'lib-card',
 })
-class LibCardComponent implements AfterContentInit {
+class LibCard implements AfterContentInit {
   readonly header = contentChild(LibHeaderToken);
 
   ngAfterContentInit(): void {
@@ -180,8 +180,8 @@ If the child component has been tree-shaken, there is no runtime reference to it
 ### Naming your lightweight injection token
 
 Lightweight injection tokens are only useful with components.
-The Angular style guide suggests that you name components using the "Component" suffix.
-The example "LibHeaderComponent" follows this convention.
+The [Angular Style Guide](style-guide) suggests that you name components without the suffix `Component`.
+The example `LibHeader` follows this convention.
 
 You should maintain the relationship between the component and its token while still distinguishing between them.
-The recommended style is to use the component base name with the suffix "`Token`" to name your lightweight injection tokens: "`LibHeaderToken`."
+The recommended style is to use the component base name with the suffix `Token` to name your lightweight injection tokens: `LibHeaderToken`.