Angular interview questions and answers for 2026

How Angular interviews use these questions

Angular rounds usually mix three things: concept questions like the ones below, a small component to build or fix live, and a conversation about an app you have shipped. The concept questions are where version knowledge shows: an answer that still starts with NgModules and *ngFor tells the interviewer when you last used Angular. For the live part, see the live coding guide and the pair programming interview guide.

Junior Angular interview questions

1. What is the current Angular version, and how often does it change?

Angular v22, released on 3 June 2026, is the active version; v21 and v20 are in long-term support. Angular used to ship a major release every six months; the release page says that from v22 the cadence is a major release every 12 months (Versioning and releases). Knowing this signals that you follow the framework, not that you memorised a number.

2. What is a component, and what does "standalone" mean?

A component is a TypeScript class with the @Component decorator: a selector, a template and optional styles scoped to that template. Standalone components declare their own dependencies in imports instead of belonging to an NgModule, and they have been the default since Angular 19; before 19, standalone defaulted to false (Components).

@Component({
  selector: 'app-user-card',
  imports: [DatePipe],
  template: `<h3>{{ name() }}</h3> <small>{{ joined() | date }}</small>`,
})
export class UserCard {
  name = input.required<string>();
  joined = input<Date>();
}

3. What kinds of data binding does Angular have?

Interpolation {{ value }} for text, property binding [disabled]="isBusy" from component to DOM, event binding (click)="save()" from DOM to component, and two-way binding [(value)]="name", which is property and event binding combined.

4. How do inputs and outputs work in modern Angular?

input() declares an input as a read-only signal, input.required() makes Angular enforce that the parent sets it, and a transform option converts the value. output() declares an event, and model() is a writable input for two-way binding. The @Input decorator remains fully supported, but the docs recommend the function-based API for new code (Accepting data with input properties).

5. What is the built-in control flow, and why does @for need track?

@if/@else, @for with an optional @empty block, and @switch replace the *ngIf, *ngFor and ngSwitch directives. track tells Angular how to match items to DOM nodes, so a re-sorted or refreshed list moves existing nodes instead of recreating them. Use a unique ID; $index only for static lists (Control flow).

@for (user of users(); track user.id) {
  <app-user-card [name]="user.name" />
} @empty {
  <p>No users yet.</p>
}

6. What is a pipe, and what makes it pure?

A pipe transforms a value in a template, {{ price | currency:'EUR' }}. A pure pipe, the default, re-runs only when its input changes by reference, so it is cheap. An impure pipe runs on every change detection pass and should be rare. Mutating an array in place will not re-run a pure pipe: create a new array instead.

7. Constructor or ngOnInit?

The constructor is for dependency injection and simple field setup; inputs are not set yet. ngOnInit runs once after the first inputs arrive, so work that needs input values goes there. For cleanup, ngOnDestroy or DestroyRef.onDestroy() (Component lifecycle). With signal inputs, a computed() often replaces both ngOnInit and ngOnChanges.

8. What is a service, and how is it provided?

A class for logic and state shared between components, such as API calls or a cart. @Injectable({ providedIn: 'root' }) makes it an application-wide singleton that tree-shaking can drop if nothing uses it. Angular v22 docs also show @Service() as a shorthand for exactly that, while @Injectable stays for constructor injection and non-root scopes (Creating and using services).

Mid-level Angular interview questions

9. inject() or constructor injection?

inject() works in field initialisers and in functions such as route guards and interceptors, which have no constructor; that is why the docs use it throughout. It only works in an injection context: during construction of a component, directive or service, or inside a provider factory. Calling it later, for example in a click handler, throws (Injection context).

export class Profile {
  private http = inject(HttpClient);
  private route = inject(ActivatedRoute);
}

10. How do hierarchical injectors work?

There are two hierarchies: environment injectors, configured by root providers and routes, and element injectors, created for components and directives. Angular looks up the element tree first, then the environment injectors, and the first match wins. A service in a component's providers gets a new instance per component instance and is destroyed with it; viewProviders hides it from projected content. optional, self, skipSelf and host change the lookup (Hierarchical injectors).

11. What are signals, and what do computed and effect do?

A signal wraps a value and notifies consumers when it changes: signal() creates a writable one with set and update. computed() derives a read-only signal; it is lazy and memoised, and only the signals actually read in the last run are dependencies. effect() runs side effects when signals it read change (Signals).

const items = signal<Item[]>([]);
const total = computed(() => items().reduce((s, i) => s + i.price, 0));
items.update((list) => [...list, newItem]); // total recomputes on next read

12. When should you not use effect?

For deriving state. Copying one signal into another in an effect causes extra change detection passes and subtle ordering bugs; use computed(), or linkedSignal() when the derived value must also be writable, such as a selection that resets when the list changes. Effects are for syncing with non-reactive APIs: logging, local storage, a third-party chart. Also, signal reads after an await are not tracked.

13. How does change detection work, and what does OnPush change?

Angular checks component templates for changed bindings and updates the DOM. With OnPush, Angular checks a component subtree only when it receives new inputs (compared with Object.is), when an event is handled inside it, or when something marks it for check, such as a signal read in its template, the async pipe or markForCheck(). Mutating an input object in place therefore does not update an OnPush child. Since v22, OnPush is the default strategy, and the docs call the other strategy Eager (Skipping component subtrees).

14. What is zoneless Angular?

Change detection without Zone.js, which used to patch browser APIs to guess when something might have changed. Without it, Angular runs change detection when it is notified: a signal read in a template is updated, an event listener in a template runs, markForCheck() is called (the async pipe does this), or ComponentRef.setInput is used. Zoneless is the default from v21; v20 apps enable it with provideZonelessChangeDetection() (Zoneless).

15. Signals or RxJS?

Signals hold current state that templates read synchronously; Observables model streams of events over time, with operators for debouncing, cancellation and combining sources. Most apps use both: RxJS for HTTP calls and event streams, signals for state. toSignal() subscribes immediately and unsubscribes when the component or service is destroyed; toObservable() emits a signal's value after it stabilises (RxJS interop).

const query = signal('');
const results = toSignal(
  toObservable(query).pipe(debounceTime(300), switchMap((q) => api.search(q))),
  { initialValue: [] },
);

16. How do you avoid subscription leaks?

Prefer not to subscribe by hand: the async pipe and toSignal() unsubscribe for you. When you must subscribe in a component, use takeUntilDestroyed() from @angular/core/rxjs-interop. HTTP observables complete after one response, so they leak less, but an unfinished request can still update a destroyed component.

17. How do routing, lazy loading and guards work?

Routes map paths to components; loadComponent or loadChildren with a dynamic import() splits a route into its own bundle. Guards are functions, such as CanActivateFn, that use inject() and return a boolean, a UrlTree or RedirectCommand to redirect, or a Promise or Observable of those. The four types are canActivate, canActivateChild, canDeactivate and canMatch. The docs warn never to rely on client-side guards as the only access control (Route guards).

export const authGuard: CanActivateFn = () =>
  inject(AuthService).isLoggedIn() || inject(Router).parseUrl('/login');

export const routes: Routes = [
  { path: 'admin', canActivate: [authGuard], loadComponent: () => import('./admin').then((m) => m.Admin) },
];

18. Reactive forms, template-driven forms or Signal Forms?

Reactive forms define the form model in TypeScript and suit complex, dynamic or heavily validated forms. Template-driven forms keep the model in the template with ngModel and suit simple ones (Forms). Signal Forms are the newer, signal-based API with their own guide. In an interview, say which one your last project used and why.

19. What is an HTTP interceptor?

A function that sees every request and response from HttpClient, used for auth headers, logging, retries and error mapping. Functional interceptors are registered with provideHttpClient(withInterceptors([...])), and the docs recommend them over class-based ones because their order is more predictable (Interceptors).

export const authInterceptor: HttpInterceptorFn = (req, next) =>
  next(req.clone({ setHeaders: { Authorization: `Bearer ${inject(Auth).token()}` } }));

Senior Angular interview questions

20. What does @defer do, and which triggers does it have?

It lazy-loads the components, directives and pipes inside a block as a separate chunk, with optional @placeholder, @loading and @error blocks. Triggers: on idle (the default), viewport, interaction, hover, immediate, timer, and when with a condition; prefetch downloads earlier than it renders. Deferred dependencies must be standalone and not referenced elsewhere in the same file, or they are loaded eagerly (Deferred loading with @defer).

@defer (on viewport; prefetch on idle) {
  <app-comments [postId]="id()" />
} @placeholder {
  <p>Comments</p>
}

21. What is content projection, and how do queries see projected content?

<ng-content> renders markup the parent passes between the component's tags; select sends parts to named slots. viewChild() and viewChildren() query the component's own template; contentChild() and contentChildren() query projected content. The signal-based queries return signals, so there is no "available after ngAfterViewInit" timing question to get wrong (Referencing component children with queries).

22. How would you speed up a slow Angular app?

Measure first with the Angular DevTools profiler. Then the usual fixes, in rough order of payoff: lazy-load routes and @defer heavy blocks, give every @for a stable track, keep components OnPush and state in signals, move expensive template calls into computed() or pure pipes, and virtualise very long lists. Server-side rendering with hydration improves first load (Hydration).

23. How does Angular protect against XSS?

It treats all values bound into the DOM as untrusted and sanitises them by context (HTML, style, URL), and interpolation never renders HTML. The risky parts are the escape hatches: bypassSecurityTrustHtml and friends, direct DOM access through ElementRef, and building templates from user input. Server-side checks still apply: Angular protects the page, not your API (Security).

24. How would you migrate an older Angular app?

Upgrade one major version at a time with ng update, then use the official schematics for the code style: standalone components, the control flow syntax, inject(), signal inputs, outputs and queries, and lazy-loaded routes all have migrations (Migrations). Do it incrementally and keep tests green between steps; a big-bang rewrite is the answer interviewers do not want to hear.

25. How do you structure state in a large Angular app?

Start with the smallest thing that works: local signals in components, services holding signals for shared state, and a store library only when many features read and write the same state and you need tooling around it. A senior answer explains the trade-off and where server state such as caching and refetching lives, rather than naming one library as the answer.

How to practise these answers

• Build one small app on current Angular. A list with search, a detail route behind a guard and a deferred block covers half of the questions above, and gives you real error messages to talk about.
• Say each answer in under a minute. Concept, example, trade-off. Then stop and let the interviewer pick the follow-up.
• Expect a coding round too. Frontend loops still include algorithms or a take-home; the technical interview preparation plan and the take-home assignment guide cover those, and the system design framework helps with "design a dashboard" questions.
• Prepare the project story. "Tell me about the hardest bug in your Angular app" is a behavioral question; see the behavioral questions guide.

Where Interview Copilot fits

We make Interview Copilot, a desktop app that listens to the call and puts a suggested answer on your screen, so this paragraph is about our own product. In a knowledge round it can bring up the concept behind a question, for example what triggers change detection under OnPush, while you are answering. It does not replace knowing Angular, and it belongs only in interviews where your own tools are allowed: if you are not sure, ask the recruiter before the round starts.

Sources

• angular.dev — Versioning and releases
• angular.dev — Components
• angular.dev — Accepting data with input properties
• angular.dev — Component lifecycle
• angular.dev — Referencing component children with queries
• angular.dev — Control flow
• angular.dev — Deferred loading with @defer
• angular.dev — Signals
• angular.dev — Creating and using services
• angular.dev — Injection context
• angular.dev — Hierarchical injectors
• angular.dev — Skipping component subtrees (OnPush)
• angular.dev — Zoneless
• angular.dev — RxJS interop with Angular signals
• angular.dev — Route guards
• angular.dev — Forms
• angular.dev — HTTP interceptors
• angular.dev — Hydration
• angular.dev — Security
• angular.dev — Migrations

Documentation was read on 27 October 2026, when Angular v22 was the active version. Defaults such as OnPush and zoneless depend on the version your project is on.

How the app helps here

Related articles

Read next