40+ Angular and JavaScript Interview Questions
lets discuss 40 + frequently asked angular and JavaScript interview questions
JavaScript Interview Questions
1. What are closures in JavaScript?
- Closures allow an inner function to remember variables from its outer function even after the outer function has finished executing.
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
- Closures power callbacks, event listeners, and async programming all of which are used in Angular.
2. Difference between var, let, and const?
- var : functionscoped, can be redeclared.
- let : blockscoped, reassignable.
- const: blockscoped, cannot be reassigned.
3. What is event delegation?
- Instead of attaching event listeners to multiple child elements, you attach one to the parent. The event bubbles up and gets handled at the parent level.
- Saves memory and improves performance—super important in large apps.
4. Difference between == and ===?
- == loose equality (performs type conversion).
- === strict equality (compares type + value).
- Always use === to avoid bugs.
5. What is the event loop in JavaScript?
- The event loop is what makes JavaScript asynchronous. It constantly checks the call stack and the callback queue, allowing nonblocking code execution.
6. What are Promises and async/await?
- Promise :represents a future value (resolved or rejected).
- async/await: syntactic sugar for writing cleaner asynchronous code.
async function fetchData() {
const res = await fetch('/api/data');
return res.json();
}
7. What is hoisting?
- Hoisting means JavaScript moves variable and function declarations to the top of their scope before code execution.
8. Difference between null and undefined?
- null : intentional “no value.”
- undefined : variable declared but not assigned.
9. What are arrow functions, and how are they different?
- Arrow functions don’t have their own this. They inherit it from their surrounding scope.
- Useful in Angular callbacks and RxJS streams.
10. What is the difference between synchronous and asynchronous JavaScript?
- Synchronous : one task at a time.
- Asynchronous : tasks can run in the background (timers, API calls).
11. What is a callback function?
- A callback is a function passed as an argument and executed later.
12. What is a prototype in JavaScript?
- Every JS object has a prototype, which enables inheritance. Angular’s TypeScript classes compile down to prototypebased JS.
13. What are higherorder functions?
- Functions that take other functions as arguments or return them.
- Examples: map(), filter(), reduce().
14. Explain deep copy vs shallow copy.
- Shallow copy: copies only toplevel properties.
- Deep copy means copies nested objects as well.
Angular Interview Questions
15. What is Angular, and how does it differ from AngularJS?
- AngularJS (1.x) :JavaScriptbased, MVC, slower.
- Angular (2+) :TypeScriptbased, componentdriven, faster.
16. What are the main building blocks of Angular?
- Modules
- Components
- Templates
- Directives
- Services
- Pipes
17. What is Dependency Injection in Angular?
DI means Angular creates and injects services instead of you creating them manually. Makes code testable and modular.
18. Explain Angular data binding.
- Interpolation : {{ name }}
- Property binding : [src]="imageUrl"
- Event binding :(click)="onClick()"
- Twoway binding : [(ngModel)]="username"
19. What are lifecycle hooks in Angular?
- ngOnInit() : runs after component loads
- ngOnChanges() : detects input property changes
- ngOnDestroy() :cleanup before component is destroyed
for more details on 8 life cycle hooks angular
20. How do Angular components communicate?
- @Input() - Parent - Child
- @Output() -Child -Parent
- Services with RxJS :Share data across components
21. What are Angular directives?
- Structural : *ngIf, *ngFor
- Attribute : [ngClass], [ngStyle]
22. What is Angular Routing?
- Routing allows navigation between views. Features include:
- Route parameters (:id)
- Lazy loading
- Route guards
23. What are Observables in Angular?
- Observables (via RxJS) handle async data streams (HTTP requests, events, sockets).
- Unlike promises, they can emit multiple values over time.
24. What is Angular Ivy?
- Ivy is the rendering engine that makes Angular apps smaller and faster.
25. What is Angular Universal?
- It enables ServerSide Rendering (SSR) for SEO and performance.
26. How does Angular handle forms?
- Templatedriven forms : simpler.
- Reactive forms: more control, better validation.
27. What are Angular Pipes?
- Transform data in templates. Examples: date, currency, async.
- You can also build custom pipes.
28. What is lazy loading in Angular?
- Loads modules only when needed, reducing initial bundle size.
29. What are Guards in Angular routing?
- Guards like CanActivate and CanDeactivate control route access.
30. What is ViewEncapsulation?
- Controls how CSS styles are applied:
- Emulated (default)
- None
- ShadowDOM
31. What are standalone components in Angular 17+?
- Standalone components don’t need NgModules, making apps simpler.
32. What are Angular Signals?
- Signals are new reactive primitives for managing state, simpler than RxJS in some cases.
33. What are Angular Zones?
- NgZone tracks async tasks and triggers change detection.
34. What is AheadofTime (AOT) compilation?
- AOT compiles Angular templates at build time & faster runtime performance.
35. Difference between templatedriven and reactive forms?
- Template driven: simple, less code.
- Reactive: scalable, great for complex forms.
36. How do you improve performance in Angular apps?
- Lazy loading
- OnPush change detection
- TrackBy in *ngFor
- Caching API responses
37. Difference between Subject, BehaviorSubject, and ReplaySubject in RxJS?
- Subject: plain multicast observable.
- BehaviorSubject: holds last value.
- ReplaySubject: replays multiple past values.
38. How do you handle state management in Angular?
- RxJS services
- NgRx
- Akita
- Signals (newer alternative)
39. Difference between Reactive and Imperative programming?
- Reactive: declarative, uses streams (RxJS, signals).
- Imperative : stepbystep instructions.
40. How do you make Angular apps SEOfriendly?
- Angular Universal (SSR)
- Prerendering
- Meta tags
- Lazyloaded images
Here is Quick Revision for you: 40 Angular & JavaScript Interview Questions
- Closures: Inner function remembers variables from outer function even after execution.
- var vs let vs const: var = function scope, let = block scope, const = block scope (no reassignment).
- Event delegation:Attach one listener to parent, handle child events via bubbling.
- == vs === : == loose equality with type coercion, === strict equality.
- Event loop : Handles async tasks by moving them from queue to call stack.
- Promises vs async/await: Promise handles async values; async/await makes them cleaner.
- Hoisting:JS moves declarations (not assignments) to the top at runtime.
- null vs undefined: null = intentional empty, undefined = unassigned.
- Arrow functions: Short syntax, no own this.
- Sync vs Async JS: Sync = one task at a time; Async = tasks in background.
- Callback: Function passed into another to be executed later.
- Prototype: Enables inheritance in JS objects.
- Higherorder function: Function that takes/returns another function (map, filter).
- Deep vs shallow copy: Shallow copies only one level; deep copies nested too.
- Angular vs AngularJS: Angular = TypeScript, faster, componentbased; AngularJS = JS, MVC.
- Building blocks: Modules, Components, Templates, Directives, Services, Pipes.
- Dependency Injection: Angular provides services/objects automatically.
- Data binding: Interpolation, property, event, twoway ([(ngModel)]).
- Lifecycle hooks: ngOnInit, ngOnChanges, ngOnDestroy.
- Component communication: @Input, @Output, services with RxJS.
- Directives: Structural (*ngIf, *ngFor) and Attribute (ngClass).
- Routing: Navigation between views, supports lazy loading and guards.
- Observables: Async streams of data (multiple values over time).
- Ivy: New rendering engine, smaller bundles, faster.
- Universal (SSR): Serverside rendering for SEO and performance.
- Forms: Templatedriven (simple) vs Reactive (scalable, powerful).
- Pipes: Transform data (date, currency, async, custom).
- Lazy loading: Loads modules on demand for performance.
- Guards: Control access to routes (CanActivate, CanDeactivate).
- ViewEncapsulation: Controls style scope (Emulated, ShadowDOM, None).
- Standalone components :Angular 17+, no need for NgModules.
- Signals : New reactive state primitive, simpler than RxJS in some cases.
- Zones (NgZone) :Detect async tasks, trigger change detection.
- AOT compilation : Precompiles templates at build time.
- Template vs Reactive forms :Template = simple, Reactive = complex validation.
- Performance optimization: Lazy load, OnPush, TrackBy, cache data.
- Subject vs BehaviorSubject vs ReplaySubject :Subject : plain, Behavior :last value, Replay : past values.
- State management: RxJS, NgRx, Akita, Signals.
- Reactive vs Imperative programming: Reactive = declarative streams, Imperative = stepbystep.
- SEO in Angular : Angular Universal, prerendering, meta tags, lazyloaded images.