Angular Developer Interview Questions India 2026

Angular core architecture concepts:

1. Components: The basic building block of Angular applications. Each component has a TypeScript class (@Component decorator), an HTML template, and optional styles. Metadata: selector (CSS selector used to insert the component), templateUrl, styleUrls. Component communication: @Input() for parent-to-child, @Output() with EventEmitter for child-to-parent, shared services for siblings.

2. NgModules: Angular applications are organised into NgModules. AppModule is the root module. Feature modules group related components, directives, pipes, and services. Lazy-loaded modules are loaded on demand (route-level code splitting). declarations: components/directives/pipes that belong to this module. imports: other modules this module needs. exports: what this module makes available to other modules. providers: services registered at the module level.

3. Dependency Injection (DI): Angular's DI system creates and manages instances of services and injects them where needed. @Injectable({ providedIn: 'root' }): singleton service available application-wide. Inject in constructor: constructor(private userService: UserService) {}. Hierarchical injectors: component-level providers create separate instances per component (not singleton). Tokens: can inject primitive values or configuration objects using InjectionToken.

4. Directives: Three types: (a) Component directives (components are directives with a template); (b) Structural directives: modify DOM structure (ngIf adds/removes elements, ngFor repeats elements, *ngSwitch); (c) Attribute directives: change appearance or behaviour of an element (NgClass, NgStyle, custom directives with @Directive).

RxJS is central to Angular and a major interview topic:

1. Observables vs Promises: Observable: can emit multiple values over time; lazy (does not execute until subscribed); cancellable (unsubscribe); composable with operators. Promise: emits a single value; eager (starts executing immediately); not natively cancellable. Angular's HttpClient returns Observables. Use async pipe in templates to auto-subscribe and auto-unsubscribe: <div *ngIf="user$ | async as user">{{user.name}}</div>.

2. Key RxJS operators: map: transform each emitted value. filter: only pass values that meet a condition. switchMap: on each emission, cancel the previous inner observable and switch to a new one (ideal for search: cancel the previous HTTP call when user types another character). mergeMap: run all inner observables concurrently (order not preserved). concatMap: run inner observables sequentially (order preserved). catchError: handle errors without terminating the stream. takeUntil: automatically unsubscribe when a notifier emits (used with ngOnDestroy to prevent memory leaks).

3. Subject types: Subject: multicasts to multiple subscribers; does not replay past values. BehaviorSubject: replays the most recent value to new subscribers; requires an initial value. ReplaySubject(n): replays the last n values to new subscribers. AsyncSubject: emits only the last value, and only when completed.

4. Memory leak prevention: Not unsubscribing from long-lived Observables (e.g., interval, HttpClient streaming, store selectors) causes memory leaks. Solutions: async pipe (auto-unsubscribes), takeUntil with a subject that emits in ngOnDestroy, or explicitly unsubscribing in ngOnDestroy.

Practical Angular topics in interviews:

1. Template-driven vs reactive forms: Template-driven: form logic in the template (ngModel, required, minlength). Simple; less boilerplate; harder to test. Reactive (model-driven): form logic in the TypeScript class using FormGroup, FormControl, FormBuilder. Testable; supports dynamic form construction; preferred for complex forms at product companies.

2. Angular Router: Routes defined as an array of route objects: { path: 'users/:id', component: UserDetailComponent }. RouterModule.forRoot(routes) at root; RouterModule.forChild(routes) in feature modules. Guards: CanActivate (prevent route access), CanDeactivate (prevent leaving with unsaved changes), Resolve (pre-fetch data before route activates). Lazy loading: { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }.

3. Change detection: Angular's change detection checks every component in the tree by default (Default strategy). OnPush strategy: Angular only checks the component when its @Input() reference changes, an event originates from the component or its children, or an Observable bound with async pipe emits. OnPush with Observables and immutable data dramatically improves performance in large apps.

4. Angular signals (Angular 16+): Signals are the modern reactive primitive in Angular. const count = signal(0). count.set(1). count.update(v => v + 1). Read: count(). Computed: const doubled = computed(() => count() * 2). Effect: effect(() => console.log(count())). Signals are compatible with the existing RxJS-based reactive model and reduce the need for complex OnPush + async pipe patterns.