Question 1

What is Angular, and what are the main building blocks of an Angular application?

Accepted Answer

Angular is a TypeScript-based framework from Google for building single-page applications. Unlike a view library, it's batteries-included: the router, forms, HttpClient, dependency injection, testing utilities, i18n, SSR and the CLI all ship as first-party packages. It's a complete rewrite of AngularJS (1.x), not an upgrade of it.

The main building blocks:

Components: a TypeScript class plus a template and styles. The UI is a tree of components.
Directives and pipes: add behavior to elements and format values in templates.
Services and dependency injection: shared logic and state, supplied by injectors.
Router: maps URLs to components, with lazy loading.
Change detection: keeps the DOM in sync with state, increasingly driven by signals.

Templates are compiled ahead of time into efficient JavaScript instructions. Modern Angular is standalone-first: components declare their own imports, and the app starts with bootstrapApplication() instead of a root NgModule.

Question 2

What is a component in Angular, and what goes into the @Component decorator?

Accepted Answer

A component is the basic UI building block: a TypeScript class that holds state and behavior, paired with a template that describes the DOM and optional styles. Angular creates an instance wherever its selector matches in a template.

The @Component metadata tells the compiler how to treat the class:

selector: how it's used in templates, usually an element name like app-user-card.
template or templateUrl: the HTML.
styles or styleUrl: CSS, scoped to this component by default.
imports: the components, directives and pipes the template uses.
Optional settings such as providers, changeDetection, encapsulation and host bindings.

In current Angular, components are standalone by default, so each one declares its own template dependencies instead of relying on an NgModule's declarations. Keep the class focused on presentation; data access and shared state belong in services.

Question 3

What types of data binding does Angular support?

Accepted Answer

Data flows between the class and the template in four ways:

Interpolation {{ expr }}: one-way, class to view. Renders the value as text.
Property binding [prop]="expr": one-way, class to view. Sets a DOM or component property, e.g. [disabled]="saving". Variants: [attr.aria-expanded] for attributes, [class.active] and [style.width.px].
Event binding (event)="handler($event)": one-way, view to class, for DOM events and component outputs.
Two-way binding [(value)]="x": sugar for a property binding plus a valueChange event binding, as used by [(ngModel)] or a model() input.

A detail interviewers like: property binding targets DOM properties, not HTML attributes. Attributes only initialize properties, so an attribute with no matching property, such as data-*, is bound with [attr.name]. Template expressions should be cheap and side-effect free, because they're re-evaluated during change detection.

Question 4

What are directives, and what is the difference between structural and attribute directives?

Accepted Answer

A directive is a class that adds behavior to elements in a template. There are three kinds:

Components: directives that have their own template.
Attribute directives change the appearance or behavior of the element they're on without adding or removing it: ngClass, ngStyle, ngModel, or a custom appHighlight.
Structural directives change the DOM layout by creating and destroying views: *ngIf, *ngFor, *ngSwitchCase. The asterisk is sugar: Angular wraps the element in an <ng-template>, and the directive uses TemplateRef and ViewContainerRef to decide when to render it.

Only one structural directive can sit on an element; nest them with <ng-container>. In modern templates, the built-in control flow blocks @if, @for and @switch replace the common structural directives: they're part of the template syntax, need no import, and NgIf/NgFor are now deprecated. Custom structural directives are still useful for things like permission checks.

Question 5

What are the component lifecycle hooks, and in what order are they called?

Accepted Answer

Lifecycle hooks are methods Angular calls at specific moments. After the constructor, the order is:

ngOnChanges: before ngOnInit when the component has bound inputs, then every time an input changes. Receives SimpleChanges.
ngOnInit: once, after the first inputs are set. Initialization logic goes here.
ngDoCheck: on every change detection run, for custom change checks.
ngAfterContentInit, then ngAfterContentChecked: projected content is initialized, then checked.
ngAfterViewInit, then ngAfterViewChecked: the component's view and its child views are initialized (view queries resolved), then checked.
ngOnDestroy: once, before the component is destroyed. Clean up here.

On later passes only ngOnChanges (if an input changed), ngDoCheck and the two Checked hooks run again. Modern additions: inject(DestroyRef).onDestroy() registers cleanup from anywhere in an injection context, and afterNextRender()/afterEveryRender() are for DOM work and run only in the browser.

Question 6

What is the difference between the constructor and ngOnInit?

Accepted Answer

The constructor is a plain TypeScript class feature. Angular calls it when it instantiates the component, before any inputs are bound. It's the place to inject dependencies and set simple defaults, and nothing that depends on inputs: reading a required input() there throws, and a classic @Input() still holds its default or undefined.

ngOnInit is an Angular lifecycle hook that runs once, after the first ngOnChanges, when input values are available. Initialization that depends on inputs belongs there, like starting a fetch based on an id input.

Rules of thumb:

Keep constructors light. Heavy work there is harder to test and runs before Angular has finished setting the component up.
The view doesn't exist yet in either one; use ngAfterViewInit or afterNextRender() for DOM access.
With signals, many ngOnInit jobs become a computed() derived from inputs, or an effect() created in the constructor.

Question 7

What is dependency injection in Angular, and how does it work?

Accepted Answer

Dependency injection is a pattern where a class declares what it needs and the framework supplies it, instead of the class constructing its dependencies itself. In Angular you request a token (usually a class) with inject(UserService) or a constructor parameter, and an injector finds a provider that says how to create the value.

Providers are registered in a few places:

@Injectable({ providedIn: 'root' }) for an app-wide singleton.
The providers array of the ApplicationConfig, a route, or a component.

Injectors form a hierarchy. Angular first walks the element injectors up the component tree, then the environment injectors (route, root, platform). The first provider found wins, and its injector owns the instance. If nothing is found, you get a no-provider error unless the dependency was marked optional.

The payoff is loose coupling, easy testing (swap a real service for a fake in TestBed), and control over each dependency's scope and lifetime.

Question 8

What is a service in Angular, and what does providedIn: 'root' do?

Accepted Answer

A service is a class for logic that doesn't belong to one component's view: fetching data, shared state, logging, auth. It's marked with @Injectable() so Angular can create it and inject its own dependencies.

@Injectable({ providedIn: 'root' }) registers the service with the root environment injector, which gives you:

One instance for the whole app, shared by everything that injects it.
Lazy creation: it's instantiated the first time something injects it.
Tree-shaking: if nothing injects it, it's dropped from the bundle. A class listed in a providers array is always bundled.

"Singleton" really means one instance per injector. If you also list the service in a component's providers, that component and its children get their own separate instance, and a route's providers does the same for that route's subtree. That's handy for deliberately scoped state, but it's also the usual cause of "my service state keeps resetting".

Question 9

What is the difference between an Observable and a Promise?

Accepted Answer

- Values: a Promise settles once, with one value or an error. An Observable can emit zero, one or many values over time, then complete or error. - Laziness: a Promise's executor runs as soon as it's created. An Observable does nothing until you subscribe, and a cold Observable runs its producer again for each subscriber. That's why subscribing twice to http.get() sends two requests. - Cancellation: a Promise can't be cancelled. Unsubscribing from an Observable runs its teardown logic, and HttpClient aborts the request. - Timing: Promise callbacks always run asynchronously, as microtasks. Observables can emit synchronously (of(1)) or asynchronously. - Composition: Observables come with operators such as map, switchMap, retry and debounceTime. Angular uses Observables for HttpClient, router events and form valueChanges. To bridge the two, firstValueFrom() and lastValueFrom() turn an Observable into a Promise, and from(promise) goes the other way.

Question 10

How does change detection work in Angular?

Accepted Answer

Change detection keeps the DOM in sync with component state. Each compiled template has an update function that re-evaluates its bindings, compares each result with the previous value (by identity, not deep equality), and touches only the DOM that changed. A pass walks the component tree top-down from the root, so parents are checked before their children.

Two questions matter: when a pass runs, and which components it checks.

When: classically, Zone.js patched async APIs (events, timers, promises, XHR) and triggered ApplicationRef.tick() after each task. Zoneless apps, the default in recent versions, schedule a pass only when Angular is notified: a signal read in a template changes, a template listener fires, markForCheck() is called (the async pipe does this), or an input is set.
Which: the eager strategy checks every component on every pass. OnPush components are checked only when marked dirty, and signals let Angular refresh just the views that read the changed signal.

In development mode Angular runs an extra check and throws NG0100 (ExpressionChangedAfterItHasBeenChecked) if a binding changed in between.

Question 11

How do Angular components communicate with each other?

Accepted Answer

It depends on how the components are related:

Parent to child: inputs. The child declares input() (classic @Input()) and the parent binds [todo]="item".
Child to parent: outputs. The child declares output() (classic @Output() with an EventEmitter) and calls emit(); the parent listens with (toggled)="onToggle($event)".
Both ways: model() enables [(value)] two-way binding.
Parent calling into a child: a view query such as viewChild(TodoItem), or a template reference variable, gives the parent the child instance.
Siblings or unrelated components: a shared service that holds state in signals or a BehaviorSubject, provided at the right level.
Across routes: route params, query params and navigation state.

Content projection with <ng-content> is the other composition tool: the parent passes markup instead of data. When lots of state is shared across a large app, a store (NgRx or a signal-based store) formalizes the service approach.

Question 12

What are pipes, what is the difference between pure and impure pipes, and how do you create a custom one?

Accepted Answer

Pipes transform values for display in templates: {{ price | currency:'EUR' }}, {{ createdAt | date:'short' }}. Built-ins include date, currency, decimal, percent, uppercase, titlecase, slice, json, keyvalue and async.

Pure pipes (the default) re-run transform only when the input value or an argument changes: a different primitive or a new object reference. Mutating an array in place doesn't re-run them. That makes them cheap, effectively memoized per binding.
Impure pipes (pure: false) run on every change detection pass, so they must be fast. async, json and keyvalue are impure because their output can change while the input reference stays the same.

A custom pipe is a class decorated with @Pipe({ name }) that implements PipeTransform. Pipes are standalone by default, so you add them to a component's imports. Prefer a pure pipe (or a computed() signal) over calling a method in the template, which re-runs on every check.

Question 13

What are standalone components, and how do they differ from NgModules?

Accepted Answer

NgModules were Angular's original unit of compilation. A module listed components in declarations, pulled in dependencies through imports, shared things with exports and registered providers. A component could only use what its module made available, which led to lots of indirection and "shared modules".

A standalone component lists its own template dependencies in its imports array, so it's self-contained. It's the default in current Angular, and the rest of the app follows the same style:

Bootstrap with bootstrapApplication(App, appConfig) instead of bootstrapModule(AppModule).
Configure with provider functions such as provideRouter(routes) and provideHttpClient() instead of RouterModule.forRoot() and HttpClientModule.
Lazy load a single component with loadComponent.

The benefits are less boilerplate, dependencies visible in one place, and simpler lazy loading and testing. The two styles interoperate: a standalone component can import an NgModule, and an NgModule can import a standalone component. The CLI ships a migration: ng generate @angular/core:standalone.

Question 14

What does the OnPush change detection strategy do, and when does an OnPush component update?

Accepted Answer

With ChangeDetectionStrategy.OnPush, Angular checks a component only when its view has been marked dirty. Otherwise the traversal skips it and, unless something inside was flagged, its whole subtree. A component is marked dirty when: - an input receives a new reference (via a template binding or setInput()), - an event handled by a template or host listener fires in the component or a descendant, - the async pipe receives a value, - markForCheck() is called, - a signal read in its template changes. What does not update it: mutating an input object in place, or assigning a plain field inside a setTimeout, a promise or a subscribe callback. That's why OnPush code uses immutable updates (spread, map, filter) and signals or the async pipe for async data. The payoff is fewer checks in large trees and a more predictable data flow. In the newest Angular versions OnPush is the default when changeDetection isn't set, and the check-always strategy is named Eager (previously Default).

Question 15

What is the difference between switchMap, mergeMap, concatMap and exhaustMap?

Accepted Answer

All four map each source value to an inner Observable, subscribe to it and flatten its values into one stream. They differ only in what happens when a new value arrives while the previous inner Observable is still running:

switchMap cancels the previous inner and switches to the new one. Use it when only the latest result matters: typeahead search, loading details for the current route param.
mergeMap runs inners concurrently, optionally with a concurrency limit. Use it for independent parallel work where order doesn't matter.
concatMap queues values and runs inners one at a time, in order. Use it for sequential writes such as autosave.
exhaustMap ignores new values until the current inner completes. Use it to prevent double submits on a login or save button.

Two points that impress interviewers: don't use switchMap for writes, because unsubscribing doesn't undo a request the server already received; and put catchError on the inner Observable, so one failed request doesn't kill the outer stream.

Question 16

What is the difference between Subject, BehaviorSubject, ReplaySubject and AsyncSubject?

Accepted Answer

All four are both an Observable and an Observer, and they're multicast: every subscriber shares the same execution. The difference is what a late subscriber receives:

Subject: no initial value and no memory. Subscribers only get values emitted after they subscribe.
BehaviorSubject: requires an initial value and always holds the current one. A new subscriber immediately gets the latest value, and you can read it synchronously with .value or getValue(). The classic choice for state in services.
ReplaySubject(bufferSize, windowTime): no initial value; replays the last N values (optionally only those within a time window) to each new subscriber.
AsyncSubject: emits only its last value, and only when it completes. Subscribers that arrive after completion get that value too, a bit like a Promise.

Expose subjects from services through asObservable() so consumers can't call next(). In modern Angular, a signal() often replaces a BehaviorSubject for synchronous state.

Question 17

How do you set up routing in an Angular application?

Accepted Answer

You define a Routes array and register it with provideRouter(routes) in the application config (classic apps use RouterModule.forRoot(routes)). Each route maps a path to a component or to a lazy loadComponent/loadChildren, and can have children, redirectTo, guards, resolvers and data. In templates: - <router-outlet /> marks where the routed component renders. - routerLink="/users" or [routerLink]="['/users', id]" navigates without a full page reload, and routerLinkActive adds a class to the active link. In code, inject(Router).navigate(['/users', id]) navigates, and ActivatedRoute exposes paramMap, queryParamMap and data, as Observables or through snapshot. With withComponentInputBinding(), params, query params and resolved data are bound straight to component inputs. Order matters: the router takes the first route that matches, so put specific paths before general ones and the ** wildcard last. An empty-path redirect needs pathMatch: 'full'.

Question 18

What is the difference between template-driven and reactive forms, and when would you use each?

Accepted Answer

Both are built on the same model classes (FormControl, FormGroup), but they differ in where the form model lives.

Template-driven (FormsModule): you describe the form in the template with ngModel and validation attributes such as required and minlength, and directives create the controls implicitly. The data model is mutable and bound two-way, and setup is asynchronous because the controls are created as the view renders. Good for simple forms: login, a search box, a settings toggle.
Reactive (ReactiveFormsModule): you build the model explicitly in the class with FormGroup, FormControl, FormArray or FormBuilder, and bind it with [formGroup] and formControlName. Access is synchronous, values are strongly typed, valueChanges and statusChanges are Observables, and validators are plain functions. That makes them easier to unit test and better for dynamic or complex forms.

Most teams default to reactive forms for anything non-trivial. Recent Angular versions also add Signal Forms, a signal-based API in @angular/forms/signals.

Question 19

What are route guards, and what types does Angular provide?

Accepted Answer

Guards are functions the router runs to decide whether a navigation may proceed. Modern Angular uses functional guards, which can call inject():

canActivate: may the user enter this route? (auth, roles)
canActivateChild: the same check for every child route.
canDeactivate: may the user leave? Typically "you have unsaved changes".
canMatch: may this route definition be used at all? If it returns false, the router tries the next matching route, and a lazy route's code isn't downloaded. It replaces the deprecated canLoad.

A guard returns true/false, a UrlTree or RedirectCommand to redirect, or an Observable or Promise of one of those. Returning a UrlTree is better than calling router.navigate() inside the guard, because the router handles the redirect as part of the same navigation.

Class-based guards implementing CanActivate still work, but functions are simpler and composable. And guards are a UX feature, not security: the server must still enforce authorization.

Question 20

How does lazy loading work in Angular, and how do you lazy load a route?

Accepted Answer

Lazy loading splits the app into chunks that are downloaded only when needed, which shrinks the initial bundle and speeds up the first load. The build creates a separate chunk for every dynamic import().

For routes:

loadComponent: () => import('./settings/settings').then((m) => m.Settings) lazy loads one standalone component. If the file uses a default export, () => import('./settings/settings') is enough.
loadChildren: () => import('./admin/admin.routes').then((m) => m.ADMIN_ROUTES) lazy loads a whole set of child routes (in NgModule apps, a routing module).

Related tools:

Preloading: withPreloading(PreloadAllModules) downloads lazy chunks in the background after the app starts, so later navigations are instant.
canMatch guards keep a chunk from being downloaded for users who can't use it.
Route providers give a lazy section its own environment injector and scoped services.
@defer lazy loads parts of a template rather than whole routes.

Don't statically import a lazy component elsewhere, or it ends up back in the main bundle.

Question 21

What are signals in Angular? Explain signal, computed and effect.

Accepted Answer

A signal is a reactive wrapper around a value that notifies its consumers when the value changes. You read it by calling it, count(), which lets Angular track who depends on it.

signal(initial) creates a writable signal, changed with set() or update(fn). asReadonly() exposes a read-only view of it.
computed(() => ...) derives a read-only value. It's lazy and memoized: it recalculates only after a signal it read changes, and it tracks dependencies dynamically.
effect(() => ...) runs a side effect whenever the signals it read change. It runs at least once, runs asynchronously as part of change detection, needs an injection context, and is destroyed with the component or service that created it. Use it to sync with the outside world (storage, logging, a chart library), not to copy one signal into another; that's a computed().

Signals compare with Object.is by default, so update immutably. Templates are reactive consumers too: a signal change refreshes only the views that read it, which makes OnPush and zoneless change detection practical. untracked() reads a signal without tracking it.

Question 22

What are HTTP interceptors, and how do you write one in modern Angular?

Accepted Answer

An interceptor is middleware for HttpClient: every request passes through the chain on the way out, and every response on the way back. Typical uses are auth headers, logging, global error handling, retries, caching and loading indicators. In modern Angular an interceptor is a function of type HttpInterceptorFn. It receives the request and a next handler and returns next(req), optionally transformed with RxJS operators. It runs in an injection context, so it can call inject() (at the top, not inside async callbacks). Register it with provideHttpClient(withInterceptors([...])). Key details: - Requests are immutable: use req.clone({ setHeaders: {...} }) to change one. - Order matters: requests flow through interceptors in the listed order, responses in reverse. - HttpContext tokens pass per-request flags, such as "skip auth for this call". Class-based interceptors (implementing HttpInterceptor, registered with the HTTP_INTERCEPTORS multi-provider) still work, but need withInterceptorsFromDi().

Question 23

How do you prevent memory leaks from RxJS subscriptions in Angular?

Accepted Answer

A subscription to a long-lived Observable keeps running after the component is destroyed: its callback still fires and holds a reference to the component, so it can't be garbage collected. Typical culprits are interval, fromEvent, subjects in root services, store selectors, router events and valueChanges. HTTP calls complete after one response, so they leak less, but cancelling them on destroy still avoids work for a dead component.

Options, most preferred first:

Don't subscribe manually: the async pipe and toSignal() both unsubscribe automatically.
takeUntilDestroyed() from @angular/core/rxjs-interop completes the stream when the component, directive or service is destroyed. It needs an injection context; in ngOnInit or later, pass it a DestroyRef.
take(1) or first() when you only need one value.
Classic: a destroy$ Subject used with takeUntil(this.destroy$) and completed in ngOnDestroy, or keeping the Subscription and calling unsubscribe().

Put takeUntil or takeUntilDestroyed last in the pipe, so no later operator keeps an inner subscription alive.

Question 24

What does the async pipe do, and why is it preferred over subscribing manually?

Accepted Answer

The async pipe subscribes to an Observable (or a Promise) from the template and returns its latest value. It: - Unsubscribes automatically when the component is destroyed, or when the bound expression switches to a different Observable, so there's no leak. - Marks the component for check on every emission, so it works with OnPush components. - Returns null until the first value arrives. It's preferred because there's less boilerplate, no manual subscription management, and the data stays a declarative stream instead of being copied into mutable fields. The main pitfall: each | async creates its own subscription. Writing user$ | async three times against a cold HTTP Observable sends three requests. Subscribe once with @if (user$ | async; as user) or @let user = user$ | async;, or share the stream with shareReplay. In signal-based code, toSignal() does the same job from the class.

Question 25

What happens when an Angular application starts? How is it bootstrapped?

Accepted Answer

The CLI build uses main.ts as the entry point, and index.html contains the root element, such as <app-root>. In a standalone app, main.ts calls bootstrapApplication(App, appConfig). Angular then: - creates the platform and the root environment injector from the providers in appConfig (provideRouter, provideHttpClient and so on); providedIn: 'root' services are created on demand later, - runs app initializers registered with provideAppInitializer() and waits for any async ones, - creates the root component, renders it into the element that matches its selector, and starts change detection so later state changes reach the DOM. In NgModule apps, main.ts calls platformBrowser().bootstrapModule(AppModule) (older code uses platformBrowserDynamic()), and AppModule lists the root component in its bootstrap array. With SSR, the server renders the same app to HTML first, and the browser hydrates that markup instead of rendering from scratch.

Question 26

What is Angular's built-in control flow (@if, @for, @switch), and how does it differ from *ngIf and *ngFor?

Accepted Answer

Built-in control flow is template syntax for conditionals and loops that replaces the structural directives:

@if (cond) { } @else if (other) { } @else { }, with as to alias the value, e.g. @if (user$ | async; as user).
@for (item of items; track item.id) { } @empty { }, with the implicit variables $index, $count, $first, $last, $even and $odd.
@switch (status) { @case ('active') { } @default { } }.

How it differs from *ngIf, *ngFor and ngSwitch:

It's built into the compiler, so there's nothing to import and less runtime overhead.
track is required in @for, which forces you to think about item identity; the old trackBy was optional and often forgotten.
@empty and @else if are built in, and type narrowing works better inside @if.
No <ng-template> or <ng-container> wrappers are needed.

NgIf, NgFor and NgSwitch are deprecated, and the CLI can migrate templates with ng generate @angular/core:control-flow.

Question 27

What are input(), output() and model(), and how do they compare with @Input() and @Output()?

Accepted Answer

They're the signal-based way to declare a component's public API.

input<T>(defaultValue) and input.required<T>() return a read-only InputSignal. You read it as this.name() in the class and name() in the template, and derive from it with computed() instead of ngOnChanges. Options include alias and transform, e.g. transform: booleanAttribute.
output<T>() returns an OutputEmitterRef: call this.rated.emit(value), and the parent listens with (rated)="...". Outputs don't bubble like DOM events.
model<T>() is a writable input signal for two-way binding. When the component calls set() or update(), Angular emits a matching <name>Change event, so the parent can write [(value)]="score".

The classic equivalents are @Input() name!: string, with ngOnChanges or a setter to react to changes, and @Output() rated = new EventEmitter<number>(). The new APIs add compile-time checking of required inputs, better type inference and built-in reactivity through computed and effect, and they fit naturally with OnPush and zoneless change detection.

Question 28

What is content projection, and how does <ng-content> work?

Accepted Answer

Content projection lets a parent pass markup into a child component, much like children in React. The child's template marks where it goes with <ng-content>.

Single slot: <ng-content /> renders everything the parent put between the child's tags.
Multi-slot: <ng-content select="[card-title]" /> takes only matching content (a CSS selector on element, attribute or class), and a plain <ng-content /> catches the rest. ngProjectAs lets content match a different selector.
Fallback content: markup inside <ng-content> renders when nothing is projected into that slot.

A key detail: projected content is created and owned by the parent. It's instantiated even if the child hides the <ng-content>, so wrapping it in @if doesn't prevent creation, and the same content can't be projected twice. For conditional, lazy or repeated rendering, the parent passes an <ng-template> and the child renders it with ngTemplateOutlet.

The child reaches projected components with contentChild()/contentChildren() (classic @ContentChild), ready by ngAfterContentInit.

Question 29

What is the difference between , and ?

Accepted Answer

- defines a template fragment that is not rendered on its own. Something has to instantiate it: a structural directive, ngTemplateOutlet, the else of *ngIf, or ViewContainerRef.createEmbeddedView(). It can declare context variables with let-, so one fragment can render with different data, and a template reference such as #row gives you its TemplateRef. - is a grouping element that renders no DOM node. Use it to apply a structural directive without a wrapper

, to nest structural directives (only one is allowed per element), or as the host for *ngTemplateOutlet. - is a projection slot in a child component's template, where the parent's markup is inserted. A common pattern combines them: a reusable list or table component accepts a TemplateRef (as an input, or through contentChild(TemplateRef)) so the parent decides how each item looks, and the component renders it with ngTemplateOutlet plus a context object.

Question 30

What is the difference between ViewChild and ContentChild, and when are their results available?

Accepted Answer

Both are queries that give a component a reference to something rendered in its tree. They differ in where they look:

View queries (viewChild(), viewChildren(), classic @ViewChild/@ViewChildren) search the component's own template.
Content queries (contentChild(), contentChildren(), classic @ContentChild/@ContentChildren) search the projected content the parent passed in through <ng-content>.

You can query by template reference name ('box'), by component or directive class, or by token, and pick what you get back with read (ElementRef, TemplateRef, ViewContainerRef).

Timing: with decorators, view results are ready in ngAfterViewInit and content results in ngAfterContentInit, or already in ngOnInit with static: true if the element isn't inside a conditional block. The plural forms return a QueryList with a changes Observable. Signal queries return signals that update automatically, so you read them in computed(), effect() or afterNextRender() without worrying about hook timing, and viewChild.required() removes the undefined case.

Question 31

What is the difference between AOT and JIT compilation in Angular?

Accepted Answer

Angular templates aren't run as HTML. The Angular compiler turns each template into JavaScript instructions that create and update the DOM. The question is when that happens.

JIT (just-in-time) compiles in the browser at runtime. The compiler (@angular/compiler) ships with the app, and templates are compiled as the app starts.
AOT (ahead-of-time) compiles during the build, so the browser downloads ready-to-run code.

AOT advantages:

Faster startup: no compile step in the browser.
Smaller bundles: the compiler isn't shipped, and unused code tree-shakes better.
Errors at build time: broken bindings, unknown elements and, with strictTemplates, type errors in templates fail the build instead of the user's browser.
Security: templates aren't compiled from strings at runtime, which removes a class of template-injection risks.

Since the Ivy compiler became standard, AOT is the default for both ng build and ng serve, so JIT is mostly a legacy concern today.

Question 32

How would you create a custom attribute directive, for example one that highlights an element on hover?

Accepted Answer

Create a class with @Directive and an attribute selector such as [appHighlight]. Like components, directives are standalone by default, so a component adds it to imports to use it. - Take configuration through inputs. Giving an input the same alias as the selector lets you write appHighlight="lightblue". - React to events and update the host element with the host metadata, which angular.dev recommends over the classic @HostListener and @HostBinding decorators. - If you must touch the DOM directly, inject ElementRef and use Renderer2 rather than manipulating nativeElement yourself; it's safer with SSR. A structural directive is built differently: it injects TemplateRef and ViewContainerRef, and calls createEmbeddedView() or clear() to add or remove the template, for example an *appHasRole="'admin'" directive. Directives can also be composed onto components with hostDirectives.

Question 33

Which RxJS operators do you use most often in Angular, and what do they do?

Accepted Answer

Operators are pure functions chained with pipe(). Each returns a new Observable and leaves the source untouched. The everyday set:

Transform: map changes each value; scan accumulates state, like reduce over time.
Filter: filter drops values; take(n) and first() complete after n values or the first match; distinctUntilChanged suppresses consecutive duplicates.
Timing: debounceTime(ms) emits only after the source has been quiet for that long; throttleTime limits the rate.
Side effects: tap for logging or setting a loading flag without changing the value; finalize runs on complete, error or unsubscribe.
Flattening: switchMap, mergeMap, concatMap, exhaustMap map values to inner Observables such as HTTP calls.
Combining: combineLatest, forkJoin, merge, withLatestFrom, startWith.
Errors: catchError to recover, retry to resubscribe.
Sharing: shareReplay to multicast and cache.

The typeahead search is the classic example that uses most of them together.

Question 34

What is the difference between hot and cold Observables, and why does it matter in Angular?

Accepted Answer

The difference is where the producer lives.

A cold Observable creates its producer inside subscribe, so every subscriber gets its own, independent execution from the beginning. HttpClient requests, of, timer, interval and defer are cold.
A hot Observable's producer exists independently of any one subscription. Subscribers share it and only receive values emitted after they subscribe. Subjects, DOM events and a shared WebSocket stream are hot.

Why it matters:

Subscribing twice to http.get(), for example two | async pipes, sends two requests.
A late subscriber to a hot stream misses earlier values.

To turn a cold Observable into a shared (multicast) one, use share(), where late subscribers only get future values, or shareReplay({ bufferSize: 1, refCount: true }), which also replays the latest value to late subscribers. That's the usual way to cache an HTTP result that several components read. A BehaviorSubject or a signal in a service is the other common way to share state.

Question 35

What is the difference between forkJoin and combineLatest?

Accepted Answer

Both combine several Observables into one, but they emit at different times.

forkJoin waits for every source to complete, then emits once with the last value of each (as an array or an object) and completes. It's the RxJS version of Promise.all, ideal for parallel HTTP calls. If any source errors, it errors; if any source completes without emitting, it completes without emitting anything. Don't use it with streams that never complete, such as valueChanges.
combineLatest emits every time any source emits, once each source has emitted at least once, with the latest value from each. It's for derived state from long-lived streams, such as data plus filters. Seed slow sources with startWith if you need an early first emission.

Related operators: zip pairs values by index, withLatestFrom samples other streams only when the main one emits, and merge interleaves values without combining them. In signal-based code, computed() often replaces combineLatest for synchronous state.

Question 36

How do you write custom synchronous and asynchronous validators for reactive forms?

Accepted Answer

A synchronous validator is a ValidatorFn: a function that takes an AbstractControl and returns null when valid, or an errors object such as { forbiddenValue: true }. Wrap it in a factory function when it needs parameters. For cross-field rules like "passwords match", put the validator on the FormGroup and read the child controls. An async validator (AsyncValidatorFn) returns an Observable or Promise of ValidationErrors | null, typically from an HTTP call such as "is this username taken?". Details worth knowing: - Async validators run only after all sync validators pass. - While one runs, the control's status is PENDING. - The Observable must complete; HTTP calls do, but for other streams add first(). - Use updateOn: 'blur', or debounce inside the validator, to avoid a request per keystroke. Show errors with control.hasError('taken') or control.errors?.['taken']. In template-driven forms, the same logic is wrapped in a directive that provides NG_VALIDATORS or NG_ASYNC_VALIDATORS.

Question 37

What are the different provider types (useClass, useValue, useFactory, useExisting), and when do you need an InjectionToken?

Accepted Answer

A provider tells an injector how to produce the value for a token:

useClass: instantiate a class, possibly a different one than the token, e.g. { provide: Logger, useClass: ConsoleLogger }. A bare providers: [Logger] is shorthand for this.
useValue: supply a ready-made value, such as a config object or a test double.
useFactory: call a function when the token is first requested. The factory can call inject() (classic code lists its dependencies in deps), which makes it right for values computed from the environment.
useExisting: an alias that points one token at another, so both return the same instance. useClass here would create a second one.
multi: true: several providers add to one token, and injecting it returns an array, as with NG_VALIDATORS.

An InjectionToken is needed for anything that isn't a class, because TypeScript interfaces and types disappear at runtime. new InjectionToken<AppConfig>('APP_CONFIG') gives you a typed, unique token; the string is only a debug label. A token can also carry a tree-shakable default with { providedIn: 'root', factory: () => ... }.

Question 38

Explain hierarchical injectors in Angular. How does Angular decide which instance of a service a component gets?

Accepted Answer

Angular has two injector trees: - Element injectors follow the component tree. A component or directive with providers (or viewProviders) gets one on its host element. - Environment injectors hold app-wide services: the root injector (providedIn: 'root' plus the providers passed to bootstrapApplication), child injectors for routes with providers and lazy-loaded routes, then the platform injector, and finally the NullInjector, which throws. When a component injects a token, Angular walks up the element injectors from the requesting element, then up the environment injectors. The first provider found wins, and that injector owns the instance. Consequences: - Component providers create a new instance per component instance, shared by its descendants and destroyed with it. Good for per-widget state such as an editor or a wizard. - Route providers share one instance across that route's subtree. - viewProviders hides the service from projected content. - Resolution modifiers adjust the search: optional returns null instead of throwing, self looks only locally, skipSelf starts at the parent, and host stops at the host component.

Question 39

What is the inject() function, how does it differ from constructor injection, and what is an injection context?

Accepted Answer

inject(Token) resolves a dependency from the current injector, exactly like a constructor parameter, but as a function call. Both go through the same injectors, so the result is the same; the differences are about where you can use it. inject() only works inside an injection context: - a constructor or a field initializer of a class Angular creates (component, directive, pipe, service), - a provider useFactory or an InjectionToken factory, - functional guards, resolvers and interceptors, - code wrapped in runInInjectionContext(injector, fn). Calling it anywhere else, such as in a click handler, ngOnInit or a setTimeout, throws NG0203. Inject in a field and use the value later. Why it's now preferred: - It works in functions, which is what made functional guards and interceptors possible. - Inheritance is simpler: subclasses don't have to forward dependencies to super(). - Options are typed: inject(Logger, { optional: true }) has the type Logger | null. - You can build reusable helpers that call inject() internally.

Question 40

What is ChangeDetectorRef, and what is the difference between markForCheck() and detectChanges()?

Accepted Answer

ChangeDetectorRef gives a component manual control over its own change detection. Its main methods: - markForCheck() marks this view and all its ancestors dirty, so they're checked in the next pass. It doesn't run a check itself; in a zoneless app it also schedules that next pass. It's the fix when an OnPush component assigns a plain field in a callback Angular doesn't know about. The async pipe calls it for you. - detectChanges() checks this view and its children synchronously, right now. Use it with detach(), or in tests. Reaching for it to silence NG0100 errors is usually a sign of broken data flow. - detach() removes the view from the tree so passes skip it; reattach() puts it back. That suits widgets that refresh on their own schedule, like a high-frequency ticker. - checkNoChanges() is the dev-mode verification check. In modern code you rarely need any of these: signals, the async pipe and toSignal() notify Angular automatically. Turning that plain field into a signal removes the need for markForCheck().

Question 41

How does two-way binding work under the hood, and how do you make your own component support [( )] syntax?

Accepted Answer

The "banana in a box" syntax is pure sugar. [(size)]="fontSize" compiles to a property binding plus an event binding:

[size]="fontSize" (sizeChange)="fontSize = $event"

So any component with an input x and an output named xChange supports two-way binding. The data flow is still one-way in each direction: the value goes down through the input, and changes come back up through the event.

Modern: model() declares both at once. size = model(16) is a writable signal; calling this.size.set(20) updates it locally and emits sizeChange. The parent can bind a plain field or a writable signal, passing the signal itself without calling it: [(size)]="fontSize".
Classic: @Input() size plus @Output() sizeChange = new EventEmitter<number>(), emitting manually.

[(ngModel)] follows the same pattern: [ngModel] plus (ngModelChange). Splitting it is handy when you want to transform the value, e.g. (ngModelChange)="name = $event.trim()".

Question 42

What is a route resolver, and what are the trade-offs of using one?

Accepted Answer

A resolver loads data before a route activates, so the component renders with its data already available. In modern Angular it's a function of type ResolveFn<T> that can call inject() and returns a value, a Promise or an Observable. You register it under the route's resolve key. How it behaves: - Resolvers run after all guards have passed. - The router takes the first value an Observable emits. If it completes without emitting, the navigation is cancelled. - If it errors, the navigation fails, so catch errors and return a fallback or a RedirectCommand to a "not found" page. - The component reads the result from ActivatedRoute.data, or directly as an input with withComponentInputBinding(). The trade-off is perceived performance: nothing on screen changes until the data arrives, so the app can feel frozen on slow connections. Show a global progress bar from router events, or load the data in the component instead (with httpResource() or an Observable) and render a skeleton. Resolvers fit best when the page is meaningless without its data.

Question 43

What are @defer blocks, and how do they work?

Accepted Answer

@defer lazy loads a section of a template. The components, directives and pipes used only inside the block are split into a separate chunk and loaded when a trigger fires, which keeps them out of the initial bundle. Triggers: - on idle (the default): when the browser is idle. - on viewport, on interaction, on hover: based on the placeholder or a referenced element. - on immediate, on timer(2s), or when condition for a custom expression. - prefetch on ... downloads the code earlier than it's rendered. Companion blocks: @placeholder shows before loading starts (with an optional minimum display time), @loading shows while the chunk downloads (after and minimum prevent flicker), and @error shows if loading fails. Gotchas: dependencies must be standalone, and if they're referenced anywhere else in the same file (another part of the template, or a viewChild query) they're bundled eagerly. During SSR, the server renders the @placeholder. With incremental hydration, hydrate on triggers let the server render the real content and hydrate it later.

Question 44

What is view encapsulation in Angular, and what are the available modes?

Accepted Answer

View encapsulation controls whether a component's styles stay inside that component. It's set with the encapsulation option:

ViewEncapsulation.Emulated (the default): Angular adds generated attributes to the component's elements (like _ngcontent-... and _nghost-... on the host) and rewrites its CSS selectors to include them. Styles don't leak out to other components, but global styles still apply inside.
ViewEncapsulation.ShadowDom: uses the browser's native Shadow DOM, so isolation works in both directions. Only inherited properties and CSS custom properties cross the boundary.
ViewEncapsulation.None: no scoping; the styles become global once the component loads.

Related selectors: :host styles the component's own host element, and :host-context(.dark) applies styles based on an ancestor. ::ng-deep pushes a rule into child components; it's deprecated but still supported. For theming children, CSS custom properties are the cleaner option, since they pass through every encapsulation mode.

Question 45

What are template reference variables, and what can they refer to?

Accepted Answer

A template reference variable is declared with #name on an element, and gives you a handle you can use elsewhere in the same template. What it refers to depends on where it's placed:

On a plain element: the DOM element, e.g. an HTMLInputElement.
On a component: the component instance, so the template can call its public methods.
With a directive's exportAs name: that directive instance, e.g. #f="ngForm" or #m="matMenu".
On an <ng-template>: its TemplateRef.

Common uses are reading an input's value without binding it to a field, letting one element control another, and naming elements for viewChild('name').

Scope: a variable is visible throughout its template, but one declared inside an @if or @for block (or an <ng-template>) isn't visible outside that block. For values computed in the template, @let declares a local variable instead.

Question 46

How would you optimize the performance of a slow Angular application?

Accepted Answer

First measure: the Angular DevTools profiler shows which components are checked and how long each pass takes, Lighthouse covers load metrics, and bundle analysis shows what's in each chunk. Then work on two fronts. Load time - Lazy load routes with loadComponent/loadChildren, and heavy template sections with @defer. - Enforce bundle budgets in angular.json, and keep large libraries out of the main chunk. - Use SSR or prerendering with hydration for a faster first paint. - Use NgOptimizedImage (ngSrc, plus priority on the LCP image) for sizing and lazy loading of images. Runtime - OnPush and signals, so change detection only touches affected views. Zoneless removes Zone.js overhead. - A stable track expression in @for (trackBy for *ngFor), so DOM nodes are reused instead of recreated. - Pure pipes or computed() instead of method calls in templates, which re-run on every check. - Virtual scrolling (CDK cdk-virtual-scroll-viewport) for long lists. - Debounce noisy input, cancel stale requests with switchMap, and clean up subscriptions. - In Zone.js apps, run high-frequency work outside Angular with NgZone.runOutsideAngular().

Question 47

How do you handle errors in an Angular application, both for HTTP calls and globally?

Accepted Answer

Errors are handled at several levels: - Per request: HttpClient errors with an HttpErrorResponse. status holds the HTTP status code, and 0 usually means a network or CORS failure. Use catchError to return a fallback (of([])) or rethrow a friendlier error with throwError(() => ...). Inside a switchMap, catch on the inner Observable so the outer stream survives. - Retries: retry({ count: 2, delay: 1000 }) resubscribes, which re-sends the request. Use it for transient failures and idempotent requests, not blindly for writes. - Cross-cutting: an interceptor centralizes behavior like redirecting to login on 401 or showing a toast. - Global: uncaught errors are sent to ErrorHandler, which logs to the console by default. Provide your own implementation to report to a monitoring service. provideBrowserGlobalErrorListeners() also forwards the window's error and unhandledrejection events to it. With signals, toSignal() rethrows the Observable's error when the signal is read, and resource() exposes an error() signal and an 'error' status for the template to render.

Question 48

When would you use signals and when would you use RxJS Observables in an Angular app?

Accepted Answer

They solve different problems, and they interoperate.

Signals model state: a value that always exists and changes over time. Reads are synchronous, computed() derivations are memoized and glitch-free, there's no subscription to manage, and templates that read them get fine-grained change detection. Use them for component state, derived values, inputs and shared state in services.

Observables model events and async streams: things that happen over time, possibly with no current value. They shine at time and concurrency logic: debouncing, cancellation with switchMap, retries, combining several async sources, WebSockets. HttpClient, the router and reactive forms all expose Observables.

A common split is RxJS at the edges for async orchestration and signals for the state the template reads. Bridge the two with toSignal() and toObservable(), and use resource() or httpResource() for signal-driven data fetching.

Signals don't replace all of RxJS: a signal has no notion of completion or error events, and if you set it twice synchronously, consumers only see the last value.

Question 49

What role does Zone.js play in Angular, and what changes with zoneless change detection?

Accepted Answer

Zone.js monkey-patches the browser's async APIs (addEventListener, setTimeout, Promise, XHR and more), so Angular hears about every task that runs. When a task finishes, NgZone triggers ApplicationRef.tick(), a change detection pass from the root. That's why mutating any field in any callback "just works".

The costs: extra bundle size and startup work, a pass after every task even if nothing changed (a mousemove handler, a polling timer), noisier stack traces, and native async/await can't be patched, so the CLI has to downlevel it.

Zoneless change detection drops Zone.js. Angular schedules a pass only when it's notified: a signal read in a template changes, a template or host listener runs, markForCheck() is called (the async pipe does this), ComponentRef.setInput() runs, or a view is attached or removed. Recent Angular versions are zoneless by default; older apps opt in with provideZonelessChangeDetection() and remove zone.js from the polyfills.

Migration checklist: keep async state in signals or the async pipe, make components OnPush-compatible, replace NgZone.onStable with afterNextRender(), and use PendingTasks so SSR waits for async work.

Question 50

How do toSignal() and toObservable() work, and what should you watch out for?

Accepted Answer

Both come from @angular/core/rxjs-interop and bridge the two reactive models. toSignal(obs$): - subscribes immediately (not lazily on first read) and exposes the latest value as a read-only signal; - unsubscribes automatically when its injection context (component, directive, service) is destroyed, so it must be called in an injection context or be given an injector; - is undefined until the first emission, unless you pass initialValue, or requireSync: true for sources that emit synchronously such as a BehaviorSubject; - rethrows the Observable's error whenever the signal is read, so handle errors in the pipe. toObservable(sig): - pushes values through an effect, so emissions are asynchronous, and several synchronous set() calls collapse into a single emission of the latest value; - also needs an injection context. The classic pattern is signal, then toObservable, then RxJS operators such as debounceTime and switchMap, then toSignal for the template. For "refetch when a signal changes", rxResource() or httpResource() express it more directly.

Angular

Notes in this chapter

Angular Change Detection, OnPush & Signals Demystified

switchMap vs mergeMap vs concatMap vs exhaustMap

Angular Dependency Injection: Providers, Scopes & inject()

Top 62 Angular interview questions most asked first