Angular Interview Questions & Answers for 2026

Components are the core building block — they combine an HTML template, CSS styles, and TypeScript class with a @Component decorator. They represent a portion of the UI. Directives modify the behaviour or appearance of existing DOM elements — structural directives (NgIf, NgFor) change the DOM structure, attribute directives (NgClass, NgStyle) change appearance. Pipes transform displayed values in templates: {{ date | date:"dd/MM/yyyy" }}. Custom pipes implement PipeTransform. Components have a view; directives and pipes do not. Everything in Angular is ultimately a directive — components are directives with templates.

Angular's change detection checks component trees to see if the model has changed and updates the view accordingly. Default strategy checks every component in the tree on every change detection cycle — safe but can be slow in large trees. OnPush strategy only checks a component when its @Input references change (new object reference), an event originates from the component or its children, or async pipe emits. OnPush significantly improves performance for large applications but requires immutable state patterns. Use the async pipe to handle Observable subscriptions — it auto-subscribes and triggers change detection on emission.

Promises represent a single future value — they are eager (start immediately), not cancellable, and resolve once. Observables (from RxJS) represent a stream of zero or more values over time — they are lazy (nothing happens until subscribed), cancellable via unsubscribe(), and composable with operators like map, filter, switchMap, debounceTime. Angular's HttpClient returns Observables, enabling request cancellation when a component is destroyed, retrying with retry(), and chaining multiple HTTP calls. Always unsubscribe in ngOnDestroy (or use takeUntil or async pipe) to prevent memory leaks.

Angular Router maps URL paths to components. Configure routes in RouterModule.forRoot() and use <router-outlet> as the render target. Lazy loading loads feature modules only when their route is first accessed, reducing initial bundle size. Route guards implement CanActivate (block navigation to a route), CanDeactivate (prompt before leaving), and CanLoad (prevent lazy module loading). Implement the CanActivateFn or CanActivate interface, check conditions (auth status, permissions), and return true to allow or false/UrlTree to redirect. Inject guards in the route configuration under canActivate.

NgModule-based architecture (pre-Angular 14) required grouping components, directives, and pipes into NgModules. Every component had to be declared in exactly one NgModule. Standalone components (Angular 14+) have imports directly in the @Component decorator, eliminating the need for NgModules for most use cases. They reduce boilerplate and are now the recommended approach. Standalone components import other standalone components, directives, pipes, and NgModules directly. Angular 17+ makes standalone the default when generating new components. Existing NgModule-based apps can migrate incrementally.

Angular applications are organised into feature modules (NgModule or standalone route groups). Lazy loading loads a feature module only when its route is first navigated to, keeping the initial bundle small. Configure it in routing with loadChildren: () => import("./feature/feature.module").then(m => m.FeatureModule) for NgModules, or loadComponent / loadChildren for standalone. The router downloads the chunk asynchronously and caches it. Pre-loading strategies (PreloadAllModules, QuicklinkStrategy) can pre-fetch likely-next modules in the background after the initial load to improve navigation speed.

Angular's dependency injection (DI) system maintains a hierarchy of injectors. A service provided in root (providedIn: "root" in @Injectable) is a singleton shared across the entire application — the injector creates one instance and reuses it everywhere. Services provided in a specific module or component create a new instance scoped to that module or component subtree. This hierarchy means child injectors can have their own instances while parent components share one. DI enables loose coupling, testability (substitute mock services in tests), and clean separation of business logic from components.