Top 40 Angular Interview 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.

NgModule is a decorator that groups related components, directives, pipes, and services. Every Angular app has a root AppModule. Modules declare what components they own, import other modules they depend on, export components for other modules to use, and provide services (in providers). Angular 14 introduced standalone components that don't require a module.

Lazy loading defers loading a feature module's JavaScript bundle until the user navigates to that route. Configure with loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) in the route config. This reduces initial bundle size and improves first-load time. Preloading strategies (PreloadAllModules) can background-load lazy modules after the app bootstraps.

Pipes transform data in templates: {{ date | date:'dd/MM/yyyy' }}, {{ price | currency:'INR' }}, {{ text | uppercase }}. Create a custom pipe with @Pipe({ name: 'myPipe' }) on a class implementing PipeTransform with a transform(value, ...args) method. Declare it in a module. Pure pipes (default) only recalculate when input reference changes; impure pipes recalculate on every change detection cycle.

@ViewChild lets a component access a child component, directive, or DOM element from the template. Usage: @ViewChild(ChildComponent) child: ChildComponent — after ngAfterViewInit, this.child holds the reference. @ViewChild('myRef') accesses a template reference variable (#myRef). Use for calling methods on child components, reading DOM properties, or accessing form controls.

Template-driven forms use directives (ngModel, ngForm) in the template — simple, less boilerplate, but limited in dynamic scenarios and harder to test. Reactive forms define the form model in the component class using FormGroup and FormControl — more explicit, testable, dynamic (add/remove controls programmatically), and better for complex validation. Prefer reactive forms for anything beyond a simple contact form.