Top 10 AngularInterview Questions & Answers (2025)

Angular is a full-featured, opinionated framework developed by Google that includes routing, form handling, HTTP client, DI container, and state management conventions out of the box. React is a UI library — you choose your own tools for routing, state, etc. Angular uses TypeScript by default, two-way data binding, and a Component + Module + Service architecture. React is more flexible; Angular gives more structure.

A component is the fundamental building block of Angular UIs. It consists of a TypeScript class decorated with @Component, an HTML template, and optional CSS styles. The decorator specifies the selector (how to use the component in HTML), templateUrl (or inline template), and styleUrls. Components form a tree with AppComponent as the root.

Data binding synchronises data between component class and template. Four types: (1) Interpolation {{value}} — one-way, class to template. (2) Property binding [property]='value' — one-way, class to DOM. (3) Event binding (click)='handler()' — one-way, DOM to class. (4) Two-way binding [(ngModel)]='value' — bidirectional using both property and event binding (the 'banana in a box' syntax).

The constructor runs first and is for dependency injection — inject services here. ngOnInit is an Angular lifecycle hook that runs after Angular has initialised the component's inputs. Put initialisation logic (API calls, data processing using @Input values) in ngOnInit, not the constructor. Testing is also easier since you can call ngOnInit explicitly in tests after setting up inputs.

Directives are classes that add behaviour to elements. Structural directives (prefixed with *) alter DOM structure by adding/removing elements: *ngIf, *ngFor, *ngSwitch. Attribute directives change the appearance or behaviour of an element: ngClass, ngStyle, and custom directives using @Directive. The * syntax is shorthand for <ng-template> wrapping.

Angular has a hierarchical DI system. Services are registered in providers arrays (AppModule for singleton, component-level for scoped instance) or with @Injectable({ providedIn: 'root' }) for tree-shakeable singletons. Angular's injector creates and caches service instances, injecting them via constructor parameters typed to the service class. This enables testability (swap real services for mocks in tests).

RxJS is a library for reactive programming using Observables — streams of data over time. Angular's HttpClient returns Observables; the Router exposes route params as Observables; form value changes are Observables. Key operators: map, filter, switchMap (cancel previous inner Observable), mergeMap, combineLatest, debounceTime, takeUntil. Always unsubscribe to prevent memory leaks (use async pipe or takeUntil with a Subject).

The async pipe subscribes to an Observable or Promise in the template and automatically unsubscribes when the component is destroyed, preventing memory leaks. Usage: *ngIf='users$ | async as users'. It also marks the component for change detection when new values arrive. Using async pipe is preferred over manual subscribe/unsubscribe in the component class for template data.

Angular's change detection checks if component data has changed and updates the DOM accordingly. Default strategy: every event, timer, or async operation triggers checking the entire component tree. OnPush strategy: only checks when inputs change (by reference), an event originates from the component, or an Observable emits. OnPush with Observables + async pipe is the performance best practice.

A Promise handles a single future value — it's eager (executes immediately on creation) and not cancellable. An Observable handles zero or more values over time — it's lazy (only executes when subscribed), cancellable (unsubscribe), and composable with operators. Observables support retry, debounce, combine, transform, and many other operators. Use Observables for streams; Promises for single async operations.