docs: Use inject for DI (angular#59835)

PR Close angular#59835

Author: JeanMeche

adev/src/content/best-practices/runtime-performance/zone-pollution.md

@@ -26,7 +26,8 @@ import { Component, NgZone, OnInit } from '@angular/core';
 
 @Component(...)
 class AppComponent implements OnInit {
-  constructor(private ngZone: NgZone) {}
+  private ngZone = inject(NgZone);
+
   ngOnInit() {
     this.ngZone.runOutsideAngular(() => setInterval(pollForUpdates), 500);
   }
@@ -43,8 +44,7 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-
-  constructor(private ngZone: NgZone) {}
+  private ngZone = inject(NgZone);
 
   ngOnInit() {
     this.ngZone.runOutsideAngular(() => {
@@ -66,9 +66,9 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-  plotlyClick = output<Plotly.PlotMouseEvent>();
+  private ngZone = inject(NgZone);
 
-  constructor(private ngZone: NgZone) {}
+  plotlyClick = output<Plotly.PlotMouseEvent>();
 
   ngOnInit() {
     this.ngZone.runOutsideAngular(() => {
@@ -98,9 +98,9 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-  plotlyClick = output<Plotly.PlotMouseEvent>();
+  private ngZone = inject(NgZone);
 
-  constructor(private ngZone: NgZone) {}
+  plotlyClick = output<Plotly.PlotMouseEvent>();
 
   ngOnInit() {
     this.ngZone.runOutsideAngular(() => {

adev/src/content/examples/animations/src/app/app.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import {Component, HostBinding} from '@angular/core';
+import {Component, HostBinding, inject} from '@angular/core';
 import {
   trigger,
   state,
@@ -36,7 +36,7 @@ export class AppComponent {
   // #enddocregion toggle-app-animations
 
   // #docregion get-route-animations-data
-  constructor(private contexts: ChildrenOutletContexts) {}
+  private contexts = inject(ChildrenOutletContexts);
 
   getRouteAnimationData() {
     return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation'];

adev/src/content/examples/attribute-directives/src/app/highlight.directive.1.ts

@@ -1,11 +1,13 @@
 // #docregion
-import {Directive, ElementRef} from '@angular/core';
+import {Directive, ElementRef, inject} from '@angular/core';
 
 @Directive({
   selector: '[appHighlight]',
 })
 export class HighlightDirective {
-  constructor(private el: ElementRef) {
+  private el = inject(ElementRef);
+
+  constructor() {
     this.el.nativeElement.style.backgroundColor = 'yellow';
   }
 }

adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts

@@ -1,14 +1,14 @@
 // #docplaster
 // #docregion imports
-import {Directive, ElementRef, HostListener} from '@angular/core';
+import {Directive, ElementRef, HostListener, inject} from '@angular/core';
 // #enddocregion imports
 // #docregion
 
 @Directive({
   selector: '[appHighlight]',
 })
 export class HighlightDirective {
-  constructor(private el: ElementRef) {}
+  private el = inject(ElementRef);
 
   // #docregion mouse-methods
   @HostListener('mouseenter') onMouseEnter() {

adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts

@@ -1,12 +1,12 @@
 // #docregion, imports
-import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+import {Directive, ElementRef, HostListener, inject, Input} from '@angular/core';
 // #enddocregion imports
 
 @Directive({
   selector: '[appHighlight]',
 })
 export class HighlightDirective {
-  constructor(private el: ElementRef) {}
+  private el = inject(ElementRef);
 
   // #docregion input
   @Input() appHighlight = '';

adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts

@@ -1,10 +1,10 @@
-import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+import {Directive, ElementRef, HostListener, inject, Input} from '@angular/core';
 
 @Directive({
   selector: '[appHighlight]',
 })
 export class HighlightDirective {
-  constructor(private el: ElementRef) {}
+  private el = inject(ElementRef);
 
   // #docregion defaultColor
   @Input() defaultColor = '';

adev/src/content/examples/dependency-injection/src/app/car/car.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 
 import {Car, Engine, Tires} from './car';
 import {Car as CarNoDi} from './car-no-di';
@@ -31,5 +31,5 @@ export class CarComponent {
   superCar = superCar();
   testCar = testCar();
 
-  constructor(public car: Car) {}
+  public car = inject(Car);
 }

adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import {NgFor} from '@angular/common';
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {Hero} from './hero';
 // #enddocregion
 import {HeroService} from './hero.service.1';
@@ -22,9 +22,5 @@ import { HeroService } from './hero.service';
   imports: [NgFor],
 })
 export class HeroListComponent {
-  heroes: Hero[];
-
-  constructor(heroService: HeroService) {
-    this.heroes = heroService.getHeroes();
-  }
+  heroes: Hero[] = inject(HeroService).getHeroes();
 }

adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts

@@ -1,12 +1,12 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import {HEROES} from './mock-heroes';
 import {Logger} from '../logger.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class HeroService {
-  constructor(private logger: Logger) {}
+  private logger = inject(Logger);
 
   getHeroes() {
     this.logger.log('Getting heroes ...');

adev/src/content/examples/dependency-injection/src/app/injector.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component, Injector} from '@angular/core';
+import {Component, inject, Injector} from '@angular/core';
 
 import {Car, Engine, Tires} from './car/car';
 import {Hero} from './heroes/hero';
@@ -24,7 +24,9 @@ export class InjectorComponent {
   heroService: HeroService;
   hero: Hero;
 
-  constructor(private injector: Injector) {
+  private injector = inject(Injector);
+
+  constructor() {
     this.car = this.injector.get(Car);
     this.heroService = this.injector.get(HeroService);
     this.hero = this.heroService.getHeroes()[0];