Angular Interview Questions
Angular is one of the most common front-end framework topics in web developer interviews. These are the questions interviewers actually ask, with concise answers you can speak confidently.
17 questions with concise, interview-ready answers.
1. What is Angular and how does it differ from AngularJS?
Angular (version 2 and above) is a TypeScript-based, component-driven front-end framework for building single-page applications, while AngularJS (1.x) was a JavaScript framework based on controllers and $scope. Angular introduced a component architecture, a hierarchical dependency injection system, RxJS observables, and ahead-of-time compilation. It is a complete rewrite, not an upgrade, and is generally faster and more maintainable than AngularJS.
2. What is a component in Angular?
A component is the basic building block of an Angular UI, defined by a class decorated with @Component that pairs an HTML template with logic and styles. The decorator metadata specifies the selector, template (or templateUrl), and styles. Every Angular app has at least one root component, typically AppComponent, that the framework bootstraps.
3. What is an NgModule and why is it used?
An NgModule is a class decorated with @NgModule that groups related components, directives, pipes, and services into a cohesive block of functionality. Its metadata includes declarations, imports, providers, and exports. Every app has a root module (AppModule), and feature modules help organize large apps and enable lazy loading. Modern Angular also supports standalone components that work without NgModules.
4. What are the types of data binding in Angular?
Angular supports interpolation ({{ value }}) and property binding ([property]) for one-way binding from component to view, event binding ((event)) for one-way binding from view to component, and two-way binding ([(ngModel)]) which combines property and event binding. Interpolation and property binding push data into the DOM, while event binding listens for user actions. Two-way binding keeps the model and view in sync automatically.
5. What is the difference between structural and attribute directives?
Structural directives change the DOM layout by adding or removing elements, and are prefixed with an asterisk, such as *ngIf, *ngFor, and *ngSwitch. Attribute directives change the appearance or behavior of an existing element, such as ngClass, ngStyle, or a custom highlight directive. The key difference is that structural directives alter DOM structure while attribute directives only modify existing elements.
6. What is dependency injection in Angular?
Dependency injection (DI) is a design pattern where a class receives its dependencies from an external source rather than creating them itself. Angular has a built-in hierarchical DI system: you mark a class with @Injectable, register it as a provider, and Angular supplies the instance through the constructor. This promotes loose coupling, reusability, and easier testing through mocking.
7. What is a service in Angular?
A service is a class that holds reusable business logic, data access, or shared state that is not tied to any specific view. Services are typically decorated with @Injectable and injected into components or other services via dependency injection. Using providedIn: 'root' registers the service as a singleton available across the whole app.
8. What are Angular lifecycle hooks?
Lifecycle hooks are methods Angular calls at specific moments in a component or directive's life. The most common are ngOnInit (after the first inputs are set, used for initialization), ngOnChanges (when input properties change), ngOnDestroy (just before the component is removed, used for cleanup), and ngAfterViewInit (after the view and child views are initialized). Implementing the matching interface, such as OnInit, is recommended for type safety.
9. What is the difference between an Observable and a Promise?
A Promise handles a single asynchronous value and executes immediately, while an Observable (from RxJS) can emit multiple values over time and is lazy, running only when subscribed. Observables are cancellable via unsubscribe and support powerful operators like map, filter, and switchMap. Angular uses Observables heavily, for example in HttpClient and reactive forms.
10. What are pipes in Angular?
Pipes transform data directly in the template for display purposes without changing the underlying value. Angular ships with built-in pipes like date, currency, uppercase, json, and async, and you apply them with the pipe character, such as {{ price | currency }}. You can also create custom pipes by implementing the PipeTransform interface. The async pipe is especially useful because it subscribes to an Observable and unsubscribes automatically.
11. How does routing work in Angular?
The Angular Router maps URL paths to components, enabling navigation in a single-page application without full page reloads. You define routes as an array of path-to-component mappings, register them with RouterModule.forRoot, and use a router-outlet directive as the placeholder where the matched component renders. The routerLink directive handles navigation, and route guards like CanActivate can control access.
12. What is lazy loading in Angular?
Lazy loading defers loading a feature module or component until the user actually navigates to its route, rather than loading everything upfront. This reduces the initial bundle size and speeds up the application's first load. It is configured in the route definition using a loadChildren or loadComponent function that dynamically imports the module or standalone component.
13. What is change detection in Angular?
Change detection is the mechanism Angular uses to keep the DOM in sync with the component's data. By default it uses the Zone.js library to detect asynchronous events (clicks, HTTP responses, timers) and then checks the component tree for changes. You can optimize performance by setting a component's changeDetection to OnPush, which only re-checks when input references change or events fire within the component.
14. What are decorators in Angular?
Decorators are TypeScript functions that attach metadata to a class, property, method, or parameter, telling Angular how to process it. Common class decorators include @Component, @Directive, @Pipe, @NgModule, and @Injectable, while property decorators include @Input and @Output. They are what make Angular's declarative, metadata-driven architecture possible.
15. What is the difference between template-driven and reactive forms?
Template-driven forms are built mostly in the HTML template using directives like ngModel and are simpler for small forms, with logic implicit in the template. Reactive (model-driven) forms are defined in the component class using FormControl, FormGroup, and FormBuilder, giving explicit, synchronous, and more testable control over form state and validation. Reactive forms are generally preferred for complex or dynamic forms.
16. What is the difference between AOT and JIT compilation?
Just-in-Time (JIT) compilation compiles the application in the browser at runtime, which is convenient during development but slower to start. Ahead-of-Time (AOT) compilation compiles the templates and components during the build, producing smaller, faster bundles and catching template errors earlier. AOT is the default for production builds in modern Angular.
17. What do @Input, @Output, and @ViewChild do?
@Input lets a parent component pass data down into a child component's property, while @Output exposes an EventEmitter so the child can emit events up to the parent. @ViewChild gives a component a direct reference to a child component, directive, or DOM element in its template so it can call methods or read values. Together they handle component communication and direct template access.
Get these answered live in your real interview
NostrobeAI is a real-time AI interview copilot — it hears the question and drafts a strong answer on your screen, invisible on Zoom, Meet, and Teams. One-time pricing, no subscription.
Try NostrobeAI free