Angular Interview Questions

What should you focus on for an Angular interview?

Which topics should you start with?

Components and templates appeared in 17 of 35 interviews, making this the most common topic in these interviews. Signals, RxJS and state management followed in 15 of 35 interviews. Start by checking whether you can explain how data moves between components and how it appears in a template.

• Can you explain how two-way data binding works?
• How would you pass data from a parent component to a child?
• Can you describe a component's structure and the role of decorators and lifecycle hooks?
• What do directives and pipes do in a template?

What should you know about signals and state?

The question about what signals are and how they are used appeared in 6 of 35 interviews. It tied with framework choice as the most asked question.

Check whether you can answer these questions without stopping at a definition:

• How are signals used in Angular?
• How would you manage shared state across components?
• Can you explain Observables, Subjects and operators?
• How would you handle subscription cleanup, cancellation and asynchronous race conditions?

Also check how you explain rendering. Can you describe the difference between Default and OnPush change detection? Can you explain manual change detection and how updates work without zones?

Can you explain your framework and project choices?

Choosing between Angular, React and other frontend frameworks was a leading question. Can you explain how you would make that choice, rather than only define Angular?

For project organization, check whether you can describe how you would divide an application into components, services, modules and features. Can you explain the roles of standalone components and NgModules? What is server rendering? What would you configure through environments and angular.json?

What practical work should you check?

For HTTP and backend integration, can you explain how interceptors handle requests and responses? How would you handle API errors and keep server data in sync? Can you describe an end-to-end integration check?

A code-writing task appeared in 1 of 35 interviews: build first name and last name inputs with a submit button that displays the input on screen. Try that exact task and check that the submitted values appear.

For related forms questions, can you explain template-driven and reactive forms, how ngModel works, and how you would add validation and show error messages?

Who gets asked Angular

The 20 most asked Angular questions

Counted by interview, not by mention: a question asked twice in one conversation counts once.

1. How would you choose between Angular, React, and other frontend frameworks?

   Asked in 6 of 35 interviews · last asked Oct 19 · Concept · Mid-level

   Show answer

   I would choose based on the project’s needs, the team’s skills, and maintenance costs. Angular is a full framework with built-in routing, forms, and dependency injection. React is a UI library with more freedom to choose supporting tools. I would compare other options, such as Vue or Svelte, using the same needs.

   • Angular provides a standard structure; React leaves more architecture choices to the team.
   • Angular uses TypeScript; React supports both JavaScript and TypeScript.
   • Compare ecosystem support, learning effort, rendering needs, and integration with existing code.
   • Neither is always faster or better; test important requirements with a small prototype.

   What the interviewer checks: The interviewer checks whether you understand the differences and can explain a choice based on real project needs.

   Other ways it was asked

   • “How do Angular and React differ, and how would you choose between them?”
   • “What is the difference between Angular and React?”
   • “What is the difference between React and Angular?”

2. What are Angular signals, and how are they used?

   Asked in 6 of 35 interviews · last asked Oct 23 · Concept · Mid-level

   Show answer

   Angular signals hold reactive values and track where those values are read. When a signal changes, Angular can update the templates and computed values that depend on it. Use signal() for writable state, computed() for derived state, and effect() for side effects.

   • Read a signal by calling it as a function; change writable signals with set() or update().
   • Computed signals are read-only and cache their result until a dependency changes.
   • Signals read in templates notify Angular when updates are needed, including in OnPush components.
   • Use computed() for derived values rather than copying state with effect().

   JavaScriptCopy

   import { signal, computed } from '@angular/core';
   
   const count = signal(0);
   const doubled = computed(() => count() * 2);
   count.set(3);
   count.update(value => value + 1);
   console.log(doubled()); // 8

   What the interviewer checks: The interviewer checks whether you understand reactive state, dependency tracking, and when to use writable signals, computed signals, and effects.

   Other ways it was asked

   • “What are Angular signals, and how do they work?”
   • “What are Angular Signals, and when would you use them?”
   • “Why are Angular signals used?”

3. What is Angular?

   Asked in 4 of 35 interviews · last asked Oct 23 · Concept · Junior

   Show answer

   Angular is a TypeScript-based framework for building web applications. It provides tools for routing, forms, dependency injection, and keeping the page in sync with application data. Angular apps use components, which combine a class, an HTML template, and optional styles to control part of the page.

   • Often used for single-page applications.
   • Components divide the user interface into reusable parts.
   • Built-in tools give teams a consistent way to structure applications.
   • Angular is different from AngularJS, the older JavaScript framework.

   What the interviewer checks: The interviewer checks whether you understand Angular’s purpose and how components organize its user interface.

   Other ways it was asked

   • “Why is Angular used?”
   • “Why would you use Angular in an application?”
   • “What is an Angular component?”

4. How does two-way data binding work in Angular?

   Asked in 4 of 35 interviews · last asked Sep 4 · Concept · Junior

   Show answer

   Two-way binding keeps a component property and a form control in sync. Property changes update the control, and user edits update the property. Angular supports both one-way and two-way binding. For form controls, use [(ngModel)], which combines property binding and event binding.

   • Import FormsModule to use ngModel.
   • [(ngModel)]="name" combines [ngModel]="name" with (ngModelChange)="name = $event".
   • The [()] syntax is often called “banana in a box.”

   CodeCopy

   <input [(ngModel)]="name">
   <p>{{ name }}</p>

   What the interviewer checks: The interviewer checks whether you understand how property binding and events keep the view and component data in sync.

   Other ways it was asked

   • “What type of data binding does Angular use—two-way or one-way?”
   • “Can you explain two-way data binding in Angular?”
   • “Can you explain the concept of two-way binding?”

5. What are Angular's change detection strategies, and how do Default and OnPush differ?

   Asked in 4 of 35 interviews · last asked Oct 15 · Concept · Mid-level

   Show answer

   Angular provides Default and OnPush change detection. Default checks a component whenever change detection reaches it. OnPush lets Angular skip subtrees unless inputs change or something marks them for checking. Default is simpler with mutable data; use OnPush to reduce unnecessary checks, especially with immutable updates.

   • For object inputs, OnPush detects a new reference, not changes made inside the same object.
   • Events handled inside an OnPush subtree also cause its OnPush ancestors to be checked.
   • AsyncPipe emissions and updates to signals read in templates mark OnPush components for checking.
   • Use markForCheck() when manual updates need an OnPush component checked.

   What the interviewer checks: The interviewer checks whether you understand when Angular checks components and how to avoid stale views with OnPush.

   Other ways it was asked

   • “What are the advantages of Angular's Default and OnPush change detection strategies, and when should you use each?”
   • “How do Angular change detection strategies Default and OnPush differ in practice?”
   • “What is the OnPush change detection strategy in Angular, and when would you use it?”

6. How do you pass data from a parent component to a child component in Angular?

   Asked in 3 of 35 interviews · last asked Aug 15 · Concept · Junior

   Show answer

   Pass data from parent to child with an input and property binding. Declare the child input with @Input(), or input() in newer Angular versions, then bind the parent value using [inputName]="value". For child-to-parent events, use an output; for unrelated components, a shared service is a common choice.

   • Square brackets bind a parent expression; name="text" passes a literal string.
   • The parent owns the passed value; the child should request changes through an output.
   • Use @Output() with EventEmitter, or output() in newer Angular versions, for child-to-parent events.

   CodeCopy

   Child component class, with Input imported from @angular/core:
   @Input() name = '';
   
   Child template:
   <p>{{ name }}</p>
   
   Parent template:
   <app-child [name]="userName"></app-child>

   What the interviewer checks: The interviewer checks whether you understand input binding and the direction of data and events.

   Other ways it was asked

   • “How can you pass data from a parent component to a child component in Angular?”
   • “In Angular, how do you pass data to a child component, and how does the child notify the parent about an event?”
   • “How do you pass data between components in Angular?”

7. When would you use lazy loading in Angular?

   Asked in 3 of 35 interviews · last asked Apr 16 · Concept · Mid-level

   Show answer

   I use lazy loading for routes or features that users do not need when the app starts, such as an admin area. Angular loads their code when needed instead of including it in the initial load. This reduces the initial download, but the first visit to a lazy route may take longer.

   • Eager loading includes code upfront; lazy loading loads it later.
   • Use loadChildren for route groups or NgModules, and loadComponent for standalone components.
   • Keep essential startup features eager; lazy-load larger or less-used features.
   • Preloading can fetch lazy route code in the background to reduce later navigation delays.

   What the interviewer checks: The interviewer checks whether you can balance a faster startup against delays when opening features later.

   Other ways it was asked

   • “When would you use lazy loading for modules and routes in Angular?”
   • “What is lazy loading in Angular, and when would you use it?”
   • “What is the difference between eager loading and lazy loading in Angular?”

8. What approaches do you use to manage shared state across Angular components?

   Asked in 3 of 35 interviews · last asked Sep 2 · Concept · Mid-level

   Show answer

   I use inputs and outputs for state shared between a parent and child. For unrelated or deeply nested components, I use a shared service with signals or RxJS observables. For complex app-wide state, I may use NgRx Store to make updates predictable and easier to trace.

   • Keep state local unless other components need it.
   • Use signals for reactive values and RxJS for asynchronous event streams.
   • Service scope matters: component-level providers can create separate instances instead of sharing state.
   • NgRx adds structure and debugging tools, but also extra code and concepts.

   What the interviewer checks: The interviewer checks whether you can choose a state-sharing approach that fits the app’s complexity and component relationships.

   Other ways it was asked

   • “In Angular, how do you manage shared state between multiple unrelated components?”
   • “How do you define state management between deeply nested or unrelated Angular components?”
   • “What approaches or tools do you use to manage state in Angular?”

9. What are Angular HTTP interceptors, and how do they handle requests and responses?

   Asked in 3 of 35 interviews · last asked Oct 15 · Concept · Mid-level

   Show answer

   Angular HTTP interceptors are middleware for HttpClient. They can inspect or change outgoing requests and process incoming responses or errors. Common uses include adding authentication headers, logging, and handling errors in one place.

   • Clone a request before changing its headers or URL.
   • Call the next handler to forward a request; use RxJS operators to process its response stream.
   • Requests follow interceptor order; responses pass back through the chain in reverse order.
   • Interceptors must be registered in Angular’s HTTP configuration to run.

   What the interviewer checks: The interviewer checks whether you understand how interceptors handle both requests and responses without repeating HTTP logic.

   Other ways it was asked

   • “What is an interceptor in Angular?”
   • “What are HTTP interceptors in Angular, and what are they used for?”
   • “What is an HTTP interceptor in Angular?”

10. How would you organize an Angular application's components, services, modules, and feature boundaries for maintainability?

    Asked in 3 of 35 interviews · last asked Sep 22 · Design · Mid-level

    Show answer

    I organize the app by business feature, keeping each feature's components, services, models, and routes together. Components handle the UI, while services handle data access and reusable logic. I keep shared code small and feature boundaries clear. For new code, I prefer standalone components; in NgModule-based apps, I use feature modules.

    • Keep feature-specific code inside its feature; share only code that multiple features need.
    • Provide app-wide services at the root; scope services locally when state should not be shared.
    • Lazy-load feature routes where useful, and avoid dependencies on another feature's internal files.
    • Keep business logic out of templates and test components and services separately.

    What the interviewer checks: The interviewer checks whether you can separate responsibilities and control dependencies as the app grows.

    Other ways it was asked

    • “How would you organize the architecture of an Angular project, including its models, components, and services?”
    • “How do you design a maintainable Angular application?”
    • “How would you structure an Angular app's modules, shared components, and feature boundaries to keep responsibilities clear?”

11. In Angular, what is the practical difference between a component’s constructor and ngOnInit, and what kinds of work would you avoid doing in the constructor?

    Asked in 2 of 35 interviews · last asked Jul 26 · Concept · Mid-level

    Show answer

    The constructor runs when Angular creates the component; ngOnInit runs after Angular sets its initial inputs. Use the constructor for dependency injection and simple setup. Use ngOnInit for input-dependent setup and starting data loads. Avoid heavy work, starting requests, or reading input values or view elements in the constructor.

    • ngOnInit runs once per component instance, not whenever inputs change.
    • Use ngOnChanges to react to later changes to bound inputs.
    • Dynamic view queries are not ready in ngOnInit; use ngAfterViewInit.

    What the interviewer checks: The interviewer is checking whether you separate object creation from Angular initialization and choose the right lifecycle hook.

    Other ways it was asked

    • “In Angular, what's the difference between a component's constructor and ngOnInit? And what kinds of work would you put in each?”

12. What are Angular's component lifecycle hooks, and when do they run?

    Asked in 2 of 35 interviews · last asked Apr 16 · Concept · Mid-level

    Show answer

    Angular’s component lifecycle hooks are methods that run during initialization, change detection, and destruction. They let you react to input changes, work with initialized content or views, and clean up resources. Initialization hooks run once; checking hooks run repeatedly; ngOnDestroy runs just before destruction.

    • ngOnChanges runs when Angular sets changed inputs, before ngOnInit on initialization; ngOnInit runs once after initial inputs.
    • ngDoCheck runs whenever Angular checks the component; keep it fast.
    • Content hooks concern projected content; view hooks concern the component’s own template and child views.
    • ngAfterContentChecked and ngAfterViewChecked repeat on checks; use ngOnDestroy to clean up subscriptions, timers, and listeners.

    CodeCopy

    First check, in order:
    ngOnChanges (if inputs change)
    ngOnInit
    ngDoCheck
    ngAfterContentInit
    ngAfterContentChecked
    ngAfterViewInit
    ngAfterViewChecked
    On destruction: ngOnDestroy

    What the interviewer checks: The interviewer checks whether you know hook order and where to handle inputs, access views, and clean up resources.

    Other ways it was asked

    • “How does the lifecycle of an Angular component work?”
    • “Can you explain the lifecycle hooks in Angular?”

13. What are decorators in Angular?

    Asked in 2 of 35 interviews · last asked Oct 15 · Concept · Junior

    Show answer

    Decorators are functions used with @ syntax to add metadata to classes and their members or parameters. Angular uses this metadata to understand how code should work within the framework. For example, @Component defines a component, while @Injectable marks a class for Angular's dependency injection system.

    • @Component, @Directive, and @Pipe describe different Angular building blocks.
    • @Input and @Output define properties used to pass data into components and send events out.
    • @Inject specifies which dependency token to use for a constructor parameter.
    • @Injectable alone does not register a provider; use providedIn or a providers configuration.

    What the interviewer checks: The interviewer checks whether you understand decorator metadata and can name common Angular decorators and their roles.

    Other ways it was asked

    • “What is a decorator in Angular?”
    • “What are some examples of decorators in Angular?”
    • “What are some other examples of decorators in Angular?”

14. How do you handle communication between Angular components?

    Asked in 2 of 35 interviews · last asked Oct 9 · Concept · Mid-level

    Show answer

    I use inputs to pass data from a parent to a child, and outputs to send events from a child to its parent. Siblings can communicate through their parent. For unrelated components, I use a shared service with signals for state or RxJS observables for data streams.

    • Inputs pass data down; outputs let the parent handle child events.
    • Modern Angular supports input() and output(); @Input and @Output are also supported.
    • Components using a shared service must receive the same service instance to share state.
    • Use a state management library when shared state becomes complex, not for every interaction.

    What the interviewer checks: The interviewer checks whether you choose a communication method based on component relationships and state complexity.

    Other ways it was asked

    • “How does component-to-component communication work in Angular?”

15. What are the different types of directives in Angular?

    Asked in 2 of 35 interviews · last asked Oct 15 · Concept · Junior

    Show answer

    Angular has three types of directives: components, structural directives, and attribute directives. Components have their own templates. Structural directives add or remove elements from the DOM. Attribute directives change the appearance or behavior of existing elements.

    • Components define reusable parts of the user interface.
    • Structural directive examples include *ngIf and *ngFor, deprecated since Angular 20.
    • Attribute directive examples include ngClass and ngStyle.
    • Modern Angular uses built-in @if and @for blocks instead of these structural directives; blocks are not directives.

    What the interviewer checks: The interviewer checks whether you can name the three types and explain how each affects the user interface.

    Other ways it was asked

    • “What types of directives are there in Angular?”

16. How do you choose between template-driven and reactive forms and handle validation in Angular?

    Asked in 2 of 35 interviews · last asked Aug 15 · Concept · Mid-level

    Show answer

    I choose template-driven forms for simple forms and reactive forms for complex, dynamic, or heavily tested forms. Template-driven forms use ngModel and validation directives; reactive forms define controls and validators in TypeScript. I show specific error messages when a control is invalid and touched, or after a submit attempt.

    • Import FormsModule for template-driven forms, or ReactiveFormsModule for reactive forms.
    • Put cross-field validators on the group containing the related controls.
    • Use async validators for server checks, and prevent submission while validation is pending or the form is invalid.
    • Always validate on the server too; client-side validation can be bypassed.

    What the interviewer checks: The interviewer checks whether you can choose a suitable form approach and build clear, reliable validation.

    Other ways it was asked

    • “How do you work with forms in Angular?”
    • “When building a form in Angular, when do you choose template-driven forms versus ReactiveForms, and how do you implement validation and show error messages cleanly?”

17. How would you use an Angular route guard to restrict a page to administrators?

    Asked in 2 of 35 interviews · last asked Mar 24 · Scenario · Mid-level

    Show answer

    Use a CanActivate route guard that checks whether the signed-in user has the administrator role. Return true to allow access, or return a UrlTree to redirect other users. Also check permissions on the server, because users can bypass browser-side guards.

    • Attach the guard to the route using canActivate.
    • Read the user's role from your authentication service.
    • If authentication loads asynchronously, return an Observable or Promise and wait for the result.
    • Return a UrlTree for redirects instead of calling navigate inside the guard.

    JavaScriptCopy

    import { inject } from '@angular/core';
    import { Router } from '@angular/router';
    import { AuthService } from './auth.service';
    import { AdminComponent } from './admin.component';
    
    export const adminGuard = () => {
      const auth = inject(AuthService);
      return auth.isAdmin() || inject(Router).createUrlTree(['/forbidden']);
    };
    export const routes = [{ path: 'admin', component: AdminComponent, canActivate: [adminGuard] }];

    What the interviewer checks: The interviewer checks whether you can enforce role-based routing and understand that server-side authorization is still required.

    Other ways it was asked

    • “In Angular, how would you restrict access to a component so that only users with an administrator role can access it?”
    • “Which Angular route guard would you use to restrict access based on a user's administrator role?”
    • “How would you restrict access to an Angular dashboard page to admin users?”

18. What are Angular route guards, and what types are available?

    Asked in 2 of 35 interviews · last asked Oct 15 · Concept · Junior

    Show answer

    Angular route guards are functions that control whether the router allows navigation or matches a route. The main types are CanActivate, CanActivateChild, CanDeactivate, and CanMatch. Older code may use CanLoad, which is deprecated in favor of CanMatch. Guards do not replace server-side permission checks.

    • CanActivate checks entry to a route; CanActivateChild checks entry to its child routes.
    • CanDeactivate checks whether users can leave, often to warn about unsaved changes.
    • CanMatch checks route matching; returning false lets Angular try other matching routes.
    • Guards can return booleans or redirect instructions, directly or through a Promise or Observable.

    What the interviewer checks: The interviewer checks whether you can choose the right guard and understand its security limits.

    Other ways it was asked

    • “What are route guards in Angular?”
    • “What are some types of route guards in Angular?”
    • “What types of route guards do you know?”

19. How do Angular signals differ from RxJS Observables?

    Asked in 2 of 35 interviews · last asked Mar 27 · Concept · Mid-level

    Show answer

    Angular signals hold a current value that you read synchronously, and Angular tracks where it is used. RxJS Observables represent streams of values delivered through subscriptions. I use signals for UI state and computed values, and RxJS for event streams and async work that needs operators such as debounce or switchMap.

    • Signals always have a current value; Observables may emit synchronously or asynchronously.
    • Observables support error and completion notifications; signals do not have those channels.
    • Signals track dependencies automatically; Observables use subscriptions that may need cleanup.
    • Angular provides toSignal and toObservable to connect the two.

    What the interviewer checks: The interviewer checks whether you can choose between reactive state and streams based on the task.

    Other ways it was asked

    • “Do you know the differences between signals and RxJS?”
    • “When would you use signals, and when would you use RxJS?”
    • “How do Angular Signals differ from Observables?”

20. How do you prevent subscription memory leaks in Angular, and when should you use the async pipe?

    Asked in 2 of 35 interviews · last asked Sep 16 · Scenario · Mid-level

    Show answer

    Prevent leaks by cleaning up subscriptions when the component is destroyed. Prefer the async pipe when the template needs stream values; it subscribes, updates the view, and unsubscribes automatically. For subscriptions used in component logic, use takeUntilDestroyed or explicitly unsubscribe in ngOnDestroy.

    • Long-lived streams, such as router events and form valueChanges, need cleanup.
    • Angular 16+ provides takeUntilDestroyed; pass DestroyRef when calling it outside an injection context.
    • The async pipe also unsubscribes from the old stream when its input reference changes.
    • HttpClient response streams normally complete, but cleanup can cancel requests when the component is destroyed.

    What the interviewer checks: The interviewer checks whether you match subscription cleanup to component lifetime and choose template subscriptions over manual ones when suitable.

    Other ways it was asked

    • “In Angular, how do you manage subscriptions in a component to avoid memory leaks, especially for long-lived streams such as router events or value changes?”
    • “How do you prevent memory leaks from RxJS subscriptions in Angular components, and when would you prefer the async pipe versus manual unsubscribe?”

Related interview questions

• Software Engineer interview questions
• DevOps Engineer interview questions
• React interview questions
• Node.js interview questions
• Next.js interview questions
• HTML and CSS interview questions
• Spring Boot interview questions
• Android and Kotlin interview questions
• iOS and Swift interview questions

How this list is made

Every question here was asked by a real interviewer in a real job interview that a candidate ran MeetAssist in. After the call, the interviewer's questions are pulled from the transcript. Practice sessions, tests, exams and anything that was not a job interview are dropped.

Questions are rewritten so they make sense on their own: names of people, employers and clients are removed, and speech-to-text mistakes are fixed. Small talk, logistics and questions about one candidate's own résumé are left out. Rephrasings of the same question are merged, and the count is the number of different interviews it came up in.

The interviews come from candidates who use MeetAssist, so they lean towards software, data and AI roles: the shares describe these interviews, not every Angular interview. Answers to the most asked questions are written and checked by an editor; a "common mistake" is shown only when reviews of real answers in these interviews show it, with the count.

35 interviews, 30 candidates, Jan 2026 to Oct 2026. Updated every month with new interviews.