In this article
Foundations
What is Angular?
Angular is a web framework from Google for building fast, reliable web applications. The overview lists components, signals for fine-grained reactivity, server-side rendering with hydration, dependency injection, routing with guards and lazy loading, forms, and tooling such as the command-line interface and the Angular DevTools extension (Angular overview, read Oct 2026). The build pipeline uses Vite and esbuild.
Why it is asked: it opens most Angular rounds; the coding interviews hub covers the other rounds of the loop. Read the full explanation: Angular overview.
What is an Angular component?
A component is a TypeScript class decorated with @Component that pairs a template with a CSS selector and optional styles. The selector decides how other templates use it, and styles are scoped by default, so a component's styles only affect elements in its own template (Components guide, read Oct 2026). Components are the unit you compose a screen from.
Why it is asked: it checks that you can name the three required parts. Read the full explanation: Components.
What does standalone mean, and what happened to NgModules?
A standalone component can go directly into another component's imports array without being declared in an NgModule, a class that groups declarations. By default Angular components are standalone; before version 19.0.0 the standalone option defaulted to false (Components guide, read Oct 2026). Older applications still use NgModules, so you meet both.
Why it is asked: it separates current Angular from older tutorials. Read the full explanation: Components.
Lifecycle
What are lifecycle hooks, and in what order do they run?
Lifecycle hooks are methods Angular calls at set points in a component's life. On creation the order is constructor, ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, then the render callbacks afterNextRender and afterEveryRender; ngOnDestroy runs just before removal (Lifecycle guide, read Oct 2026).
Text description of the diagram
- On creation the order is constructor, ngOnChanges, ngOnInit and ngDoCheck.
- The render callbacks afterNextRender and afterEveryRender come last.
Why it is asked: ordering questions test real experience. Read the full explanation: Component lifecycle.
What is the difference between the constructor and ngOnInit?
The constructor is the ordinary JavaScript constructor that runs when Angular creates the component, before inputs are set. ngOnInit runs exactly once, after the inputs get their initial values (Lifecycle guide, read Oct 2026). Keep the constructor for wiring dependencies and put start-up work that needs inputs in ngOnInit.
Why it is asked: it is the classic lifecycle question. Read the full explanation: Component lifecycle.
When do you use ngOnChanges and when ngDoCheck?
ngOnChanges runs after any component input has changed and receives what changed, so use it to react to new inputs. ngDoCheck runs every time the component is checked, for custom change detection, and the guide warns it runs very frequently and can significantly affect page performance (Lifecycle guide, read Oct 2026). Prefer ngOnChanges, or signals, unless you need the extra checks.
Why it is asked: it probes performance awareness. Read the full explanation: Component lifecycle.
Where should code that touches the DOM go?
Put it in a render callback such as afterNextRender, which runs once after all components have rendered to the document object model (DOM), or afterEveryRender for every render. Unlike class methods these are standalone functions that take a callback, and they do not run during server-side rendering or build-time pre-rendering (Lifecycle guide, read Oct 2026).
Why it is asked: it tests server-rendering awareness. Read the full explanation: Component lifecycle.
Knowing it is half the job. Saying it is the other half.
Interview Clozo is an AI interview copilot for real interview rounds: it hears the question and puts a strong answer on your screen, and you say it in your own words. See the features or how it works.
Start Free Trial →Signals and reactivity
What is a signal in Angular?
A signal is a wrapper around a value that notifies interested consumers when the value changes. You read it by calling it like a function, which lets Angular track where it is used. A writable signal is created with signal() and changed with .set() or .update() (Signals guide, read Oct 2026). Signals are the basis of Angular's fine-grained reactivity.
Why it is asked: it is the current reactivity question. Read the full explanation: Signals.
What is the difference between computed and effect?
A computed signal is a read-only signal that derives its value from other signals; it caches the result until a signal it depends on changes. An effect is for reacting to signal changes with non-reactive application programming interfaces (APIs): its callback runs in a reactive context, so signal reads inside it are tracked, but reads after an await are not (Signals guide, read Oct 2026). Derive values with computed, and keep effects for side effects.
Why it is asked: misuse of effects is a common smell. Read the full explanation: Signals.
Should you use signals or RxJS observables?
They solve different problems. A signal holds a current value; an observable is a stream of values over time, from Reactive Extensions for JavaScript (RxJS). The interop functions bridge them: toSignal turns an observable into a signal, subscribing at once and unsubscribing when its owner is destroyed, and toObservable does the reverse, emitting only after the signal stabilizes (RxJS interop guide, read Oct 2026).
Why it is asked: real apps use both. Read the full explanation: RxJS interop.
Templates
What is built-in control flow, and why does @for need track?
Built-in control flow is template syntax with @if, @for and @switch blocks for showing, hiding and repeating elements. The @for block takes a track expression that maps data items to DOM nodes so Angular can make minimal updates; use a unique property such as an id, and $index only for static collections (Control flow guide, read Oct 2026).
Why it is asked: it checks that you know the current template syntax. Read the full explanation: Control flow.
What is @defer and what does it do for bundle size?
@defer wraps template content so its code loads later, when a trigger fires or a when condition is met. The components, directives and pipes inside it are split into a separate JavaScript file, which shrinks the initial bundle. Triggers include on idle, on viewport and on interaction; @placeholder, @loading and @error blocks cover the states. Only standalone dependencies can be deferred (Deferrable views guide, read Oct 2026).
Why it is asked: it tests performance tools. Read the full explanation: Deferrable views.
Dependency injection
What is dependency injection in Angular?
Dependency injection is a design pattern in which a class is supplied with the dependencies it needs instead of creating them itself. A dependency is any object, value, function or service the class requires but does not create. You provide a value to the system and inject it where it is needed (Dependency injection guide, read Oct 2026). It makes code easier to test and replace.
Why it is asked: it is the core Angular design concept. Read the full explanation: Dependency injection.
How does Angular find a dependency?
It searches two injector trees in order. First the element injector tree, starting at the component and moving up through parent elements; then the environment injector tree. If nothing matches, it throws an error, since the top injector throws unless the request is marked optional. When the same token is provided at several levels, the first one Angular meets is used (Hierarchical injectors guide, read Oct 2026).
Why it is asked: it separates memorised definitions from understanding. Read the full explanation: Hierarchical injectors.
When do you provide a service in root and when in a component?
Provide it in root when the whole application should share one instance; root providers create a single shared instance, and the service can be tree-shaken if unused. Provide it in a component's providers array when each component instance needs its own copy; that instance is destroyed with the component (Hierarchical injectors guide, read Oct 2026).
Why it is asked: scope mistakes cause shared-state bugs. Read the full explanation: Hierarchical injectors.
What is the inject() function?
inject() requests a dependency without a constructor parameter. You can call it during construction of a component, directive or service, in a field initializer or the constructor, and in other injection contexts such as route guards (Dependency injection guide, read Oct 2026). Outside an injection context it does not work, so call it at construction time, not later in an event handler.
Why it is asked: it is how modern Angular code injects. Read the full explanation: Dependency injection.
Change detection
What is change detection, and when does it run?
Change detection is the process through which Angular checks whether application state has changed and updates the page, walking components from the top down (Runtime performance guide, read Oct 2026). What triggers it depends on the version. With ZoneJS, the default before v21, any asynchronous event such as a click or a finished request can trigger it. From v21 the zoneless default runs it only on explicit notifications, such as a signal read in a template changing (Zoneless guide, read Oct 2026).
Why it is asked: it is the standard performance topic. Read the full explanation: Runtime performance.
What is zoneless change detection, and is it the default?
Zoneless change detection runs Angular without ZoneJS, which treats every DOM event and asynchronous task as a possible state change and so checks often. Zoneless relies on explicit notifications instead: a signal read by a template changing, markForCheck, an event listener, or ComponentRef.setInput. The zoneless guide says it is the default in Angular v21 and later, and in v20 you add provideZonelessChangeDetection() (Zoneless guide, read Oct 2026).
Why it is asked: it marks a candidate who follows recent versions. Read the full explanation: Zoneless change detection.
Routing, forms and data
How does the Angular Router map URLs, and how do you handle unknown URLs?
A route is an object that maps a URL path or pattern to the component to render; outlets in templates are where the matched component appears, and links navigate without a full reload. Register routes with provideRouter. A wildcard route with the path ** catches any URL no other route matches, and because matching is first-match it goes last (Routing guide and Define routes, read Oct 2026).
Why it is asked: routing is in almost every app. Read the full explanation: Routing overview.
Reactive forms or template-driven forms?
Reactive forms give explicit control: the form model is created in the component class, is immutable and synchronous, and can be tested without rendering the user interface (UI). Template-driven forms rely on directives, are simple to add, and the guide says they do not scale as well. Choose reactive when forms are central to the app, template-driven for a simple form such as a sign-up (Forms guide, read Oct 2026). A newer option, Signal Forms, has its own guide.
Why it is asked: it tests a reasoned choice. Read the full explanation: Forms.
How does HttpClient work, and what is an interceptor?
The HttpClient service, Angular's Hypertext Transfer Protocol (HTTP) client, has methods that return an RxJS observable that is cold: no request is sent until it is subscribed to, and each subscription sends its own request (Making requests, read Oct 2026). An interceptor is middleware that runs for each request, registered with withInterceptors; typical uses are adding an auth header, logging and retrying, and they run in the order listed (Interceptors guide, read Oct 2026).
Why it is asked: it covers observables and cross-cutting concerns. Read the full explanation: HTTP interceptors. For the server side of such calls, see the interview questions on representational state transfer (REST) interfaces.
Rendering and releases
What are server-side rendering and hydration?
With server-side rendering the server produces the page's HTML first, so it is visible as soon as the HTML loads. Hydration is the process that restores the server-rendered application on the client: Angular reuses the existing page nodes instead of rebuilding them, which prevents flicker. The page structure must be identical on server and client, so direct native DOM manipulation is the common cause of failures (Hydration guide, read Oct 2026).
Why it is asked: it tests full-stack awareness. Read the full explanation: Hydration.
How often does Angular release, and how long is a version supported?
As of October 2026 the release page lists a major release every 12 months, with 4 to 6 minor releases per major and patches almost every week; until v22 the cycle was six months. A major version is usually supported for 24 months, split into 12 months of active support and 12 months of long-term support (LTS) with only critical fixes. Version 22 was released on 2026-06-03 (Angular releases, read Oct 2026).
Why it is asked: it shows how you plan upgrades. Read the full explanation: Angular releases.
For the rest of a front-end loop, see JavaScript interview questions, front-end developer interview questions and system design, and for the structure of the whole process see interview loops and the behavioral interview hub.
- Name the three parts of a component: class, template and selector; components are standalone by default.
- Signals hold current values; RxJS streams values over time; the interop functions bridge them.
- Dependencies resolve through the element injector tree first, then the environment injector tree.
- With ZoneJS, change detection follows DOM events and async tasks; zoneless, the default from v21, runs it only on explicit notifications such as signal updates and template listeners.
- Cite the version when you answer: behaviour in the docs changed across v19, v21 and v22.
Sources
- Angular overview — Angular team at Google (angular.dev; date = read date), 24 Oct 2026
- Components — angular.dev (date = read date), 24 Oct 2026
- Component lifecycle — angular.dev (date = read date), 24 Oct 2026
- Signals — angular.dev (date = read date), 24 Oct 2026
- RxJS interop — angular.dev (date = read date), 24 Oct 2026
- Built-in control flow — angular.dev (date = read date), 24 Oct 2026
- Deferrable views — angular.dev (date = read date), 24 Oct 2026
- Dependency injection — angular.dev (date = read date), 24 Oct 2026
- Hierarchical injectors — angular.dev (date = read date), 24 Oct 2026
- Runtime performance (change detection) — angular.dev (date = read date), 24 Oct 2026
- Zoneless change detection — angular.dev (date = read date), 24 Oct 2026
- Routing overview — angular.dev (date = read date), 24 Oct 2026
- Define routes — angular.dev (date = read date), 24 Oct 2026
- Forms — angular.dev (date = read date), 24 Oct 2026
- Making HTTP requests — angular.dev (date = read date), 24 Oct 2026
- HTTP interceptors — angular.dev (date = read date), 24 Oct 2026
- Hydration — angular.dev (date = read date), 24 Oct 2026
- Angular releases — angular.dev (date = read date), 24 Oct 2026
