Advanced DI — Angular Technical Interview Questions & Answers

Advanced DI

Advanced DI

  • Advanced DI is a Angular topic. In plain words you use it for MarksService shared by two pages in the campus app. Don’t start with a slogan — start with that picture.
  • Smallest example: @Injectable + constructor inject. Type it, run it, and say what you see. If you can do that from memory, you know Advanced DI.
  • From the example next to this theory: Advanced DI: toggle open.
  • Trap: new MarksService() in each component. Fix that before you talk about advanced Angular.
  • Viva: what is Advanced DI? Then show @Injectable + constructor inject. Then name the trap.

Technical Interview Tip: What is Advanced DI? Show this: @Injectable + constructor inject. Trap: new MarksService() in each component.

Code Examples for Advanced DI

Advanced DI — working 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.

How to Explain Advanced DI to an Interviewer

What is Advanced DI?

Used for MarksService shared by two pages the campus app Not just the heading

Give one small example of Advanced DI.

@Injectable + constructor inject Advanced DI: toggle open

What mistake do beginners make with Advanced DI?

new MarksService() in each component Show the fix

Where do you use Advanced DI?

the campus app MarksService shared by two pages