Angular · Theory

Advanced DI

Theory

31/43

Advanced DI

Advanced DI is simple if you keep it on paper. Priya uses it for MarksService shared by two pages in the campus app.

Advanced DI on the board: @Injectable + constructor inject. Then say what MarksService shared by two pages looks like after.

Without Advanced DI, the campus app gets messy and MarksService shared by two pages is hard to trust.

Advanced DI shows up in the campus app. Name MarksService shared by two pages, not “a real-world scenario”.

Don’t do this with Advanced DI — new MarksService() in each component. Interviewers spot it in ten seconds.

After Advanced DI, Priya should still remember new MarksService() in each component.

One breath for Advanced DI, then MarksService shared by two pages, then new MarksService() in each component. Sit down.

Diagram

  MarksPage ──inject──► MarksService
  ReportPage ──inject──► MarksService
  one root instance

Exam tip

Say Advanced DI in one breath, then @Injectable + constructor inject, then new MarksService() in each component.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Advanced DI: toggle open. Say whether the panel is on screen after one click.

Short notes

DefAdvanced DI — Priya uses it for MarksService shared by two pages in the campus app.
RuleAdvanced DI → @Injectable + constructor inject.
RememberAdvanced DI + NgModule / standalone (the campus app).
UseAdvanced DI in the campus app (MarksService shared by two pages).
TrapAdvanced DI — new MarksService() in each component.
ExAdvanced DI → MarksService shared by two pages.

import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <h1>{{ title }}</h1> <button (click)="toggle()">Toggle</button> <p *ngIf="open">Panel open</p> `, }) export class AppComponent { title = "Angular practice"; open = true; toggle() { this.open = !this.open; } }

Advanced DI

Example

Short notes

Questions

Advanced DI

Example

Short notes

Questions