Angular Tricky and Output-Based Questions

Angular bugs usually come from change detection, observables and dependency injection rules. These tricky questions show the code, what happens and why — exactly what senior Angular interviews probe.

1. Why does the OnPush component not update?

The parent mutates the array it passes in, so the input reference stays the same and OnPush does not check the component. Pass a new array (or use signals).

// parent
this.orders.push(newOrder);               // child with OnPush does not update
this.orders = [...this.orders, newOrder];  // new reference → child updates

2. Why does the signal-based view not update?

Mutating the object inside a signal keeps the same reference, so dependents may not be notified. Create a new value with update.

user = signal({ name: 'Asha', city: 'Pune' });
move() {
  this.user().city = 'Delhi';                         // no reliable update
  this.user.update(u => ({ ...u, city: 'Delhi' }));   // correct
}

3. What causes ExpressionChangedAfterItHasBeenCheckedError?

In development, Angular checks bindings twice; if a value changes between the checks — typically set in ngAfterViewInit or by a child changing parent state during change detection — it throws. Move the change earlier, derive it with a computed signal, or schedule it after the current check.

4. Why is the HTTP request sent twice?

HttpClient observables are cold: each subscription sends a request. Subscribing in code and using the async pipe on the same observable (or two async pipes) triggers two calls. Share it with shareReplay, or convert once with toSignal.

users$ = this.http.get<User[]>('/api/users');
// template uses users$ | async twice → two requests

users$ = this.http.get<User[]>('/api/users').pipe(shareReplay({ bufferSize: 1, refCount: true }));
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });

5. Why is this a memory leak?

The interval subscription is never unsubscribed, so it keeps running (and holding the component) after the component is destroyed. Use takeUntilDestroyed(), the async pipe or toSignal.

ngOnInit() {
  interval(5000).subscribe(() => this.refresh());          // leaks
}

constructor() {
  interval(5000).pipe(takeUntilDestroyed()).subscribe(() => this.refresh());   // safe
}

6. Why do two components get different instances of the “same” service?

The service is provided in a component's providers array (or a lazy route), which creates a new instance for that subtree. Use providedIn: 'root' for an app-wide singleton.

7. What does this template render while loading?

Nothing for the list, and no error — the async pipe emits null until the first value. Handle the loading state explicitly with @if and an @else block.

@if (users$ | async; as users) {
  @for (u of users; track u.id) { <p>{{ u.name }}</p> }
} @else {
  <app-spinner />
}

8. Why does calling a method in the template hurt performance?

Template expressions are evaluated on every change detection pass; an expensive method like {{ calculateTotal() }} runs constantly. Use a computed signal or a pure pipe so it recalculates only when inputs change.