Angular interview questions

Then go deeper

• You no longer write standalone: true — it is the default. Each component imports exactly what its template uses (other components, pipes, RouterLink), so dependencies are explicit and tree-shakable.
• Application-wide setup lives in app.config.ts as providers: provideRouter(routes), provideHttpClient(...) only if you configure it, and so on.
• An old library that only exports an NgModule can still go directly into a component’s imports; module providers go through importProvidersFrom().

import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig).catch((err) => console.error(err));

Then go deeper

• [disabled] binds a DOM property; for things that exist only as attributes (ARIA, colspan) you use [attr.aria-label].
• [(x)] (“banana in a box”) is sugar for [x]="v()" + (xChange)="v.set($event)". With a signal you pass the signal itself, without parentheses.
• Template expressions should be cheap and side-effect free; a signal read like count() is fine, a heavy method call runs on every check.

<h2>{{ user().name }}</h2>
<img [src]="user().avatarUrl" [attr.aria-label]="user().name" />
<button [disabled]="saving()" (click)="save()">Save</button>
<input (input)="query.set($any($event.target).value)" />
<app-toggle [(checked)]="notifications" />

Then go deeper

• Track by a stable unique id (track user.id); $index only for static lists; tracking the object itself means every refetch destroys and recreates the DOM.
• It is part of the language: no NgIf/NgFor imports. @for exposes $index, $first, $last, $even, $odd, $count.
• @if (user(); as u) gives a typed, non-null alias. Since v21.1 several @case can share a block, and @default never; (v21.2) makes a forgotten union case a compile error.

@if (tasks().length) {
  <ul>
    @for (task of tasks(); track task.id; let i = $index) {
      <li>{{ i + 1 }}. {{ task.title }}</li>
    }
  </ul>
} @else {
  <p>You have no tasks.</p>
}

Then go deeper

• It cannot be reassigned from the template; it is recomputed when what it reads changes.
• It is handy inside @for for a per-item value (e.g. a final price after discount).
• Real logic still belongs in the class as a computed(); @let is for readability, not for business rules.

Then go deeper

• [class] accepts a string, an array or an object; [style] accepts a string or an object, and units go in the binding (.px, .%, .rem).
• [ngClass]/[ngStyle] are the old way; v21 has migrations ngclass-to-class and ngstyle-to-style.
• For the component’s own host element you use the host metadata ('[class.is-loading]': 'loading()'), not @HostBinding.

Then go deeper

• Pipes are standalone and imported like any dependency (imports: [DatePipe]); a custom one is a class with @Pipe and transform().
• Because the check is by reference, a pure pipe does not re-run if you mutate an array in place.
• A method called from the template runs on every check; for component-specific calculations prefer computed(), and keep pipes for reusable display formatting. Avoid pure: false.

Then go deeper

• An input() is a read-only signal: you read it with value() and derive from it with computed() — no ngOnChanges needed.
• input.required<T>() makes a missing binding a compile error; transform: numberAttribute / booleanAttribute turn max="10" or a bare readonly attribute into the right type.
• The child cannot set() its own input. If it must change the value, it emits an event and lets the parent decide, or uses model().

export class StarRating {
  readonly value = input.required<number>();
  readonly max = input(5, { transform: numberAttribute });
  readonly rate = output<number>();

  protected readonly stars = computed(() =>
    Array.from({ length: this.max() }, (_, i) => i + 1),
  );
}

Then go deeper

• Use model() when the value truly belongs to both sides, as in a toggle, a stepper or a custom input.
• Use input() + output() when the child only proposes and the parent decides (validates, confirms, saves to the server).
• In two-way binding you pass the signal itself (notifications), not its value (notifications()).

Then go deeper

• select takes a tag, attribute or class selector ([card-title]); the <ng-content /> without select catches everything else, and you can put fallback content inside it.
• Gotcha: projected content is created by the parent even if the child hides it with @if. For truly lazy content, pass an <ng-template>.
• Projection is for flexible markup (layouts, cards, dialogs); inputs are for data the component formats itself.

Then go deeper

• Dependencies are tracked automatically: whatever signals the function reads become dependencies, with no subscriptions to manage.
• Signals compare with ===: items().push(x) notifies nobody; use update((list) => [...list, x]).
• Rule of thumb: anything that can be calculated from other state is a computed(), not a second signal kept in sync. Expose state with asReadonly().

export class Counter {
  protected readonly count = signal(0);
  protected readonly double = computed(() => this.count() * 2);

  protected increment() {
    this.count.update((c) => c + 1);
  }
}
// template: {{ count() }} · {{ double() }}

Then go deeper

• Do not use an effect to copy one signal into another: that is a computed() (or linkedSignal() if it must also be editable).
• Do not fetch data from an effect: there is no cancellation and old responses can win the race. Use httpResource() / resource().
• It must be created in an injection context (constructor or field), is destroyed with the component, and onCleanup clears timers before the next run.

Then go deeper

• Reading an input.required() in the constructor throws, because the parent has not bound it yet. With signal inputs you rarely need ngOnInit: a computed() or httpResource() reads the input when it is ready.
• inject() does not work in ngOnInit or in a click handler — that is outside the injection context (error NG0203).
• DestroyRef also works in services, directives and reusable functions, which ngOnDestroy cannot do. For DOM access after render, use afterNextRender().

export class Clock {
  readonly now = signal(new Date());

  constructor() {
    const id = setInterval(() => this.now.set(new Date()), 1000);
    inject(DestroyRef).onDestroy(() => clearInterval(id));
  }
}

Then go deeper

• @Service() is equivalent to @Injectable({ providedIn: 'root' }): created on first injection and tree-shakable. It requires inject() — constructor DI is a compile error.
• @Injectable is still valid (existing code, libraries for older versions). Putting the service in a component’s providers gives one instance per component instead of one per app.
• inject() also works in functional guards, resolvers and interceptors, and avoids long super(...) calls with inheritance.

@Service()
export class CartService {
  private readonly _items = signal<CartItem[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);

  add(item: CartItem) {
    this._items.update((list) => [...list, item]);
  }
}

Then go deeper

• loadComponent: () => import('./home-page') puts the page in a separate chunk, downloaded only when the route is visited; loadChildren does the same for a whole feature.
• Order matters — the first match wins — so the '**' wildcard goes last. routerLinkActive adds a class to the active link.
• Use routerLink, not href: href reloads the whole application.

Then go deeper

• Gotcha: navigating from /products/1 to /products/2 reuses the same component instance; code that reads the id once (e.g. a snapshot in ngOnInit) shows stale data.
• Params are strings in the URL, so a transform like numberAttribute gives you a real number.
• Since v22 child routes inherit params and data from all parents by default (paramsInheritanceStrategy: 'always').

@Component({ templateUrl: './product-page.html' })
export default class ProductPage {
  readonly id = input.required({ transform: numberAttribute }); // :id
  readonly tab = input<'specs' | 'reviews'>('specs');           // ?tab=

  readonly product = httpResource<Product>(() => '/api/products/' + this.id());
}

Then go deeper

• The Observable is cold: no request is sent until someone subscribes (subscribe(), firstValueFrom(), the async pipe).
• For reactive reads in a component, httpResource() gives value(), isLoading() and error() as signals and cancels old requests; for writes (POST, PUT) you call HttpClient.
• The generic get<T> is only a type assertion, not validation. In v22 Fetch is the default backend; cross-cutting concerns (auth token, errors) go in functional interceptors.

Then go deeper

• The model signal is the source of truth — no internal copy, no patchValue: model.set(data) fills the form, and the form writes straight into the model.
• Each field’s state is signals: f.email().invalid(), touched(), errors(); the whole form is a field too (f().valid(), f().submitting()).
• Show errors only after touched(), and always validate on the server too — client validation is UX, not security.

export class LoginForm {
  readonly model = signal({ email: '', password: '' });

  readonly loginForm = form(this.model, (p) => {
    required(p.email);
    email(p.email);
    minLength(p.password, 8);
  });
}
// template: <input [formField]="loginForm.email" />

Then go deeper

• @placeholder is shown before the trigger (needed for on viewport / interaction / hover), @loading while downloading, @error if the download fails.
• Gotcha: if a deferred component is also referenced elsewhere in the same file (outside the block), it is loaded eagerly and the chunk is lost.
• prefetch on hover downloads early and renders later — good for actions “one click away”.

@defer (on viewport) {
  <app-comments [postId]="post().id" />
} @placeholder {
  <div class="comments-skeleton"></div>
} @loading (after 100ms) {
  <app-spinner />
}

Then go deeper

• Without zone.js, a setTimeout or subscribe() that changes a plain field does not update the UI. The fix is a signal (or toSignal() / the async pipe).
• An OnPush component is checked only when an input gets a new reference, an event happens in it, a signal it reads changes, or it is marked for check — otherwise its subtree is skipped.
• ChangeDetectionStrategy.Eager is the old “always check” behaviour (Default is deprecated); ng update adds it where needed.

Then go deeper

• Test behaviour the user sees (text, clicks, emitted outputs), not private implementation details.
• Inputs can be passed as signals with inputBinding(); outputs are spied with outputBinding() and vi.fn().
• For HTTP, use provideHttpClientTesting() and HttpTestingController instead of a real server; services and signal stores can be tested with TestBed.inject() and no DOM.

it('shows the right number of stars', async () => {
  const fixture = TestBed.createComponent(StarRating, {
    bindings: [inputBinding('value', () => 3)],
  });
  await fixture.whenStable();

  const stars = fixture.nativeElement.querySelectorAll('button');
  expect(stars).toHaveLength(5);
});

Then go deeper

• Setting a signal in an effect means an extra run, a moment where the target is stale (one render with a wrong value) and a dependency graph that’s hard to follow.
• Effects are not synchronous: set a signal three times and the effect runs once, with the final value. Component effects run during change detection; effects in root services run as microtasks.
• Dependencies are dynamic: only signals read in the last run are tracked. Use untracked() for reads that shouldn’t re-trigger the effect.
• An effect needs an injection context (constructor or field initializer) or an explicit injector; otherwise you get NG0203. Use onCleanup for timers and listeners.
• HTTP from an effect is a smell: no cancellation, so responses can arrive out of order. That’s what resource / httpResource are for.

readonly firstName = signal('Ana');
readonly lastName = signal('Pop');

// ✗ effect used to synchronise state
// effect(() => this.fullName.set(this.firstName() + ' ' + this.lastName()));

// ✓ derived state
readonly fullName = computed(() => this.firstName() + ' ' + this.lastName());

// ✓ effect: reactive world → outside world
constructor() {
  effect(() => localStorage.setItem('name', this.fullName()));
}

Then go deeper

• It replaces the fragile signal + effect pattern: no extra run, no render with a stale value.
• The long form (source + computation) gives you the previous value, so you can keep the user’s choice if it still exists in the new list.
• A manual set() is valid only until the source changes again; then the computation wins.
• Since v22.1 the set option intercepts writes, e.g. to clamp a quantity to the available stock.

Then go deeper

• resource gets an abortSignal in the loader; httpResource goes through HttpClient, so interceptors apply; rxResource takes an Observable stream and behaves like switchMap.
• Returning undefined from params means status idle: the loader doesn’t run. In v22 you can also throw ResourceParamsStatus.IDLE / LOADING, and chain resources with ctx.chain().
• hasValue() is a type guard; defaultValue removes undefined; parse validates or maps the response (e.g. DTO → model, Zod).
• Resources are for reading. Writes (POST/PUT/DELETE) go through HttpClient, then you update() the resource locally (optimistic) or reload() it.

readonly userId = input.required<number>();

// a new id → the old request is cancelled, a new one starts
readonly user = httpResource<User>(() => '/api/users/' + this.userId());

// template:
// @if (user.isLoading()) { <app-spinner /> }
// @if (user.error()) { <button (click)="user.reload()">Retry</button> }
// @else if (user.hasValue()) { <h2>{{ user.value().name }}</h2> }

Then go deeper

• debounced() returns a Resource: value() updates after the last change, and isLoading() is true while the user is still typing.
• It’s experimental in v22. The classic alternative is toSignal(toObservable(query).pipe(debounceTime(300), distinctUntilChanged())): three conversions for one debounce.
• wait can be a function, e.g. no delay when the field is cleared.
• In Signal Forms there’s a dedicated debounce(path.field, 300) rule, and validateHttp has its own debounce option.

import { httpResource } from '@angular/common/http';
import { debounced, signal } from '@angular/core';

export class UserSearch {
  readonly query = signal('');
  readonly search = debounced(this.query, 300);

  readonly users = httpResource<UserDto[]>(
    () => '/api/users?q=' + encodeURIComponent(this.search.value()),
    { defaultValue: [] },
  );
}

Then go deeper

• toSignal() without initialValue is typed T | undefined; requireSync: true works only if the source emits synchronously (e.g. a BehaviorSubject).
• toObservable() emits asynchronously (through an effect) and only the last value if the signal is set several times in the same tick — it’s not an event stream.
• takeUntilDestroyed() without arguments works only in an injection context; elsewhere pass inject(DestroyRef) explicitly. For non-RxJS cleanup use DestroyRef.onDestroy().
• Keep RxJS for websockets, combining event streams, retry/backoff, and flattening policies (switchMap, exhaustMap…). Signals have no notion of time.

Then go deeper

• Choosing the operator is choosing a concurrency policy; the wrong one causes real bugs: double orders with mergeMap on a pay button, lost saves with switchMap on autosave.
• mergeMap accepts a concurrency limit, e.g. mergeMap(upload, 3).
• Put catchError inside the inner pipe: after the flattening operator, the first error completes the outer stream and the search “dies”.
• With signals, httpResource and rxResource already give you switchMap semantics for reads.

// the last one wins; errors handled INSIDE, so the stream survives
query$.pipe(
  debounceTime(300),
  switchMap((q) => this.api.search(q).pipe(catchError(() => of([])))),
);

files$.pipe(mergeMap((file) => this.api.upload(file), 3)); // parallel, max 3
patches$.pipe(concatMap((patch) => this.api.save(patch))); // in order
submit$.pipe(exhaustMap(() => this.api.login(this.credentials()))); // ignore double clicks

Then go deeper

• Since v22 components without changeDetection are OnPush; the old behaviour is ChangeDetectionStrategy.Eager (Default is deprecated). ng update adds Eager where needed.
• An OnPush component is checked only on a new input reference (===), an event in it or its children, a signal read in its template, the async pipe, or markForCheck(). Otherwise the whole subtree is skipped.
• Mutating an array passed as input (push) doesn’t change the reference: use immutable updates.
• markForCheck() is the emergency fix for legacy callbacks; detectChanges() is synchronous and rarely needed.

// ✗ works with zone.js, NOT zoneless + OnPush
// now = new Date();
// setInterval(() => (this.now = new Date()), 1000);

// ✓ a signal schedules change detection by itself
export class Clock {
  readonly now = signal(new Date());

  constructor() {
    const id = setInterval(() => this.now.set(new Date()), 1000);
    inject(DestroyRef).onDestroy(() => clearInterval(id));
  }
}

Then go deeper

• viewChild looks in the component’s own template; contentChild looks in what the parent projected (e.g. a Tabs container discovering its Tab children).
• contentChildren looks only at direct children by default; use descendants: true for deeper matches.
• read picks what you get: ElementRef, TemplateRef, ViewContainerRef, a directive, or (v22.2) the child’s Injector.
• Gotcha: querying a component by type in the class makes it eager, so it won’t be split out by a @defer block.

Then go deeper

• Wrapping ng-content in @if hides the DOM, but the projected components already exist and their lifecycle already ran.
• Named slots use select (tag, attribute, class); ngProjectAs projects several elements into one slot without a wrapper.
• The context passes data back: $implicit maps to let-item. Without a directive with ngTemplateContextGuard, the let- variables are any.
• A template sees the injector where it was declared; since v21.2 [ngTemplateOutletInjector]="'outlet'" makes it use the injector where it’s rendered.

@Component({
  selector: 'app-collapsible',
  imports: [NgTemplateOutlet],
  template: `
    <button (click)="open.set(!open())">Toggle</button>
    @if (open()) { <ng-container [ngTemplateOutlet]="content() ?? null" /> }
  `,
})
export class Collapsible {
  readonly content = contentChild(TemplateRef); // created only when opened
  readonly open = signal(false);
}
// <app-collapsible><ng-template><app-heavy-report /></ng-template></app-collapsible>

Then go deeper

• The god component smell: any[] data, isProductTable flags, 30 inputs and domain knowledge in shared/.
• Cell templates are found with contentChildren() on a directive; ngTemplateContextGuard types let-row as T instead of any.
• Pass behaviour as functions (trackBy, displayWith, compareWith) so the component doesn’t need to know the shape of the data.
• A typo in a column key becomes a compile error, not an empty column in production.

Then go deeper

• A registry of () => import(…) loaders makes each widget a separate lazy chunk.
• inputBinding('title', () => …) is reactive, unlike the old setInput() that you had to call again on every change, plus manual output subscriptions.
• ComponentFactoryResolver was removed in v22: you pass the class directly to createComponent.
• For toasts and dialogs outside the tree, use the standalone createComponent() with an EnvironmentInjector, then appRef.attachView() so it joins change detection, and destroy it yourself.

private readonly vcr = inject(ViewContainerRef);

private async render(type: WidgetType) {
  const component = await WIDGET_REGISTRY[type](); // lazy chunk
  this.vcr.clear();
  this.vcr.createComponent(component, {
    bindings: [
      inputBinding('title', () => this.config().title), // stays in sync
      outputBinding('remove', () => this.removed.emit(this.config().id)),
    ],
  });
}

Then go deeper

• Scope by lifetime: feature state in providers of the page or route (dies with it), global state (user, cart, theme) in a root @Service().
• Server data goes into httpResource inside the store; state that must survive a refresh or be shareable goes into the URL (query params + input()).
• A dumb component may have local UI state and inject UI things (ElementRef, DestroyRef), but never data services or the router — otherwise it can’t be reused or tested easily, and a list of 50 cards makes 50 requests.
• NgRx SignalStore becomes worth it when the team wants conventions, plugins and devtools, not by default.

Then go deeper

• @Service() (v22) equals providedIn: 'root', is tree-shakable and allows only inject(). autoProvided: false forces you to list it in providers.
• inject() beats constructor DI: no super(…) chains, it works in guards, interceptors and factories, and enables reusable injectX() functions. It needs an injection context (NG0203 otherwise).
• useClass, useValue, useFactory, useExisting and multi: true for plugin-style arrays; optional, self, skipSelf, host modify the lookup.
• viewProviders are invisible to projected content; EnvironmentProviders (provideX()) can go only at app or route level, not in a component.

Then go deeper

• Return true/false, a UrlTree, or a RedirectCommand (redirect + navigation options like replaceUrl); since v22.2 you can also throw a RedirectCommand.
• Resolver: the page appears with data ready, but navigation waits and an error cancels it. httpResource: instant navigation, loading and error are UI state.
• With withComponentInputBinding() resolved data, params and query params arrive as input()s.
• Guards are UX, not security: the API must enforce authorization too. canDeactivate protects unsaved changes.

Then go deeper

• Only attach the token to your own API (check the URL), never to third-party hosts.
• Order matters: requests go through the interceptors in the listed order, responses come back in reverse.
• Call inject() at the top of the function, not inside RxJS callbacks like catchError that run later, outside the injection context.
• Use HttpContextToken for per-request metadata (e.g. skip the loading bar) instead of fake headers. httpResource and validateHttp also go through interceptors.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthStore).token();
  if (!token || !req.url.startsWith('/api')) return next(req);

  return next(req.clone({ setHeaders: { Authorization: 'Bearer ' + token } }));
};

// app.config.ts
provideHttpClient(withInterceptors([authInterceptor, errorInterceptor]));

Then go deeper

• @boundary (v22.2, developer preview) has @error (let e = $error; let reset = $reset) blocks, optionally with when conditions — the first match wins.
• @boundary catches rendering errors only, not errors from event handlers or async code — those still reach the ErrorHandler.
• provideBrowserGlobalErrorListeners() forwards window.onerror and unhandled rejections to the ErrorHandler.
• An interceptor should rethrow (throwError(() => err)) after its cross-cutting reaction, so the caller can still react. Validation errors are not exceptions: they live in the form’s errors().

@boundary {
  <app-price-widget [price]="price()" />
  <app-recommendations />
} @error (let e = $error; when e instanceof PermissionError) {
  <p>You don't have access to this widget.</p>
} @error (let e = $error; let retry = $reset) {
  <app-error-card [message]="e.message" (retry)="retry()" />
}

Then go deeper

• No internal copy: model.set() updates the inputs and typing updates the model — no patchValue / valueChanges.
• Cross-field rules use valueOf() in validate; conditional ones use when, hidden, disabled (hidden and disabled fields aren’t validated); reusable rules use schema() + apply().
• validateHttp goes through HttpClient (so interceptors apply) and has a debounce option in v22; validateAsync works with any resource. pending() is true while it runs.
• Server errors from submission.action can be returned with a fieldTree so they land on the right field.
• Migration can be gradual with SignalFormControl and compatForm; typed Reactive Forms (nonNullable, getRawValue()) remain valid for existing code.

readonly model = signal({ username: '', password: '' });

readonly signup = form(this.model, (p) => {
  required(p.username);
  minLength(p.password, 8, { message: 'At least 8 characters' });
  validateHttp(p.username, {
    request: ({ value }) => '/api/username-available?username=' + value(),
    debounce: 400,
    onSuccess: (res: { available: boolean }) =>
      res.available ? undefined : { kind: 'taken', message: 'Username taken' },
    onError: () => ({ kind: 'network', message: 'Could not verify' }),
  });
});

Then go deeper

• Optional inputs like disabled, invalid, touched are filled in automatically by the form — declare only what you use. In v22 a touch output reports that the user touched the control.
• Boolean controls implement FormCheckboxControl with checked instead of value.
• A CVA needs four methods (writeValue, registerOnChange, registerOnTouched, setDisabledState) and you must call onChange yourself; forgetting onTouched breaks “show errors after touch”.
• Interop in v22: Signal Forms can bind CVAs, and template/reactive forms support FormValueControl, so one control can serve both during migration.

Then go deeper

• Referencing a deferred component in the class (e.g. viewChild(HeavyChart)) or elsewhere in the template makes it eager.
• @placeholder shows before the trigger (and is the observed element for viewport / interaction / hover without a target); @loading (after 100ms; minimum 500ms) avoids flicker; @error handles a failed chunk download.
• when fires only once; several triggers are combined with OR.
• New: on viewport({ rootMargin: '200px' }) (v21), on idle(500) (v22). With SSR, hydrate on … triggers give incremental hydration, enabled by default in v22.

@defer (on viewport; prefetch on idle) {
  <app-comments [postId]="post().id" />
} @placeholder (minimum 300ms) {
  <div class="comments-skeleton"></div>
} @loading (after 100ms; minimum 500ms) {
  <app-spinner />
} @error {
  <p>We couldn't load the comments.</p>
}

@defer (on interaction; prefetch on hover) {
  <app-share-dialog />
} @placeholder { <button>Share</button> }

Then go deeper

• Vitest is the default runner since v21 (@angular/build:unit-test); Karma is deprecated. Use vi.fn() for output spies and vi.useFakeTimers() instead of fakeAsync.
• Changing the bound signal updates the input like in a real parent — no setInput() needed.
• Signal stores are the easiest to test: TestBed.inject(), call methods, assert on computed()s. Effects run asynchronously, so flush them with TestBed.tick().
• Test behaviour through the DOM or harnesses, not private fields. TestBed.createDirective() (v22.2) tests a directive without a hand-written host.

beforeEach(() => {
  TestBed.configureTestingModule({ providers: [provideHttpClient(), provideHttpClientTesting()] });
  api = TestBed.inject(ProductsApi);
  http = TestBed.inject(HttpTestingController);
});

afterEach(() => http.verify()); // no unexpected requests

it('maps DTO → Product', async () => {
  const result = firstValueFrom(api.get(1));
  http.expectOne('/api/products/1').flush({ id: 1, name: 'Mouse', price: 99, stock: 0 });
  expect(await result).toEqual({ id: 1, name: 'Mouse', price: 99, inStock: false });
});

Then go deeper

• Dependencies are dynamic: on every run the producer list is rebuilt from what was actually read, so a signal read only in an inactive if branch does not trigger anything.
• Equality stops propagation: the version increases only if the new value is not equal (Object.is by default). A computed whose result does not change does not wake its consumers; { equal } customises this for values recreated from the server.
• Consequence: mutation (items().push()) notifies nobody, because the reference and the version stay the same. Immutability is not style, it is how the graph detects change.
• Effects are asynchronous and scheduled with change detection (view effects before their component is checked, root effects before all components). Signals are not an event mechanism and do not order side effects in time — that is RxJS territory.

const a = signal(1);
const b = signal(2);
const sum = computed(() => a() + b());
const product = computed(() => a() * b());
const result = computed(() => sum() + product()); // diamond

a.set(5);
b.set(3);  // push: versions bump, nothing is recalculated yet
result();  // pull: sum, product, result run once each, with consistent values

// equality cutoff: a new array with the same content does not propagate
const ids = signal<number[]>([], {
  equal: (x, y) => x.length === y.length && x.every((v, i) => v === y[i]),
});

Then go deeper

• The template is a reactive consumer: when a signal it read changes, Angular marks that view for refresh (like markForCheck) and change detection reaches only the affected components.
• OnPush compares inputs by reference (===): mutating an object passed through an input does not update the child — the same immutability rule as for signals.
• The classic bug: a plain field set in setTimeout, subscribe() or a third-party callback (WebSocket, Maps) — “it only updates after I click somewhere”. The fix is a signal or toSignal(); markForCheck() is the escape hatch for legacy code.
• detectChanges() is synchronous and rarely needed (measurements, tests); markForCheck() is the recommended asynchronous variant.

// ✗ worked with zone.js, does nothing zoneless + OnPush
export class Clock {
  now = new Date();
  constructor() {
    setInterval(() => (this.now = new Date()), 1000);
  }
}

// ✓ the signal tells Angular what changed
export class Clock {
  readonly now = signal(new Date());
  constructor() {
    const id = setInterval(() => this.now.set(new Date()), 1000);
    inject(DestroyRef).onDestroy(() => clearInterval(id));
  }
}

Then go deeper

• Inventory first: plain fields set in async callbacks, subscribe() into fields, libraries waiting for NgZone.onStable. Angular 21 ships an analysis tool (onpush_zoneless_migration, through the CLI MCP server, ng mcp).
• Migrate leaf components first, feature by feature: remove Eager, move state to signals / toSignal(), review and test. Each PR is small and reversible.
• Until the end, keep provideZoneChangeDetection({ eventCoalescing: true }) and the zone.js polyfill; then drop both and watch for “updates only after a click” bugs.
• Tests change too: fakeAsync needs zone.js, so move to await fixture.whenStable() and Vitest fake timers.
• In a team: a lint/review rule that new code uses signals for template state, and a short checklist in the PR template, so the migrated area does not regress.

Then go deeper

• Keep state at the lowest level that needs it (component → feature → global) and lift it only when a new consumer appears. Page state is provided on the route or component, not in root, so it does not “stick” between visits.
• Server data is a cache, not your state: keep it in httpResource/resource and reload after writes. The URL is state too (filters, pagination).
• Rules that scale: expose read-only signals (asReadonly()), one source of truth with the rest derived, no stores injecting each other circularly — that usually signals a missing facade or a misplaced concept.
• With SignalStore, only methods call patchState, rxMethod handles async flows (with catchError inside the inner stream) and signalStoreFeature removes copy-pasted loading/error code. The libraries can coexist with an existing NgRx Store.

Then go deeper

• Tags on two dimensions: scope (who talks to whom: scope:shop, scope:shared) × type (dependency direction: feature → ui / data-access → util). Constraints from both apply with AND.
• One public API per feature/library (a single barrel at the boundary, never in every folder); deep imports and static imports of lazy libraries are violations.
• Granularity is a trade-off: small libraries by domain and type give narrow nx affected graphs and cache hits; one giant shared library makes every PR affect the whole repo.
• Move to shared only what is generic, stable and already used in several features (“rule of three”); domain components used elsewhere stay in their owning feature and are exported through its public API.

'@nx/enforce-module-boundaries': ['error', {
  depConstraints: [
    // scope: who may talk to whom
    { sourceTag: 'scope:shop', onlyDependOnLibsWithTags: ['scope:shop', 'scope:shared'] },
    { sourceTag: 'scope:shared', onlyDependOnLibsWithTags: ['scope:shared'] },
    // type: which way dependencies flow
    { sourceTag: 'type:feature', onlyDependOnLibsWithTags: ['type:feature', 'type:ui', 'type:data-access', 'type:util'] },
    { sourceTag: 'type:ui', onlyDependOnLibsWithTags: ['type:ui', 'type:util'] },
    { sourceTag: 'type:util', onlyDependOnLibsWithTags: ['type:util'] },
    // ui never reaches data-access, not even transitively
    { sourceTag: 'type:ui', notDependOnLibsWithTags: ['type:data-access'] },
  ],
}],

Then go deeper

• Abstract class over interface: an interface disappears at compile time, so you would need a separate InjectionToken; the abstract class is both the type and the token.
• Errors are part of the contract: the adapter translates timeouts/503 into a domain error, so no component ever sees HttpErrorResponse.
• The payoff is in testing: domain rules as pure functions, use cases with an in-memory adapter, and one contract test suite run against every adapter.
• Pragmatic variant: a pure domain for rules that matter, a port only where there are (or will be) several implementations, the rest in the usual data-access/ui structure — and enforce the layers with lint.

// application/task-repository.ts — the PORT (type + DI token)
export abstract class TaskRepository {
  abstract list(): Promise<readonly Task[]>;
  abstract save(task: Task): Promise<void>;
}

// infrastructure/http-task-repository.ts — the ADAPTER (HttpClient + DTO mapping)
@Injectable()
export class HttpTaskRepository extends TaskRepository { /* … */ }

// app.config.ts — the COMPOSITION ROOT
providers: [{ provide: TaskRepository, useClass: HttpTaskRepository }]

Then go deeper

• Valid reasons: many teams with different cadences, very large organisations, a strangler-fig migration from a legacy app, separate products under one experience.
• Angular must be a singleton with strictVersion, ideally the exact same version everywhere: two runtimes mean components that cannot enter the shell’s tree and services with two instances. A remote on another major is isolated as a Web Component or iframe.
• Treat each remote’s exposes as a semver public API; communicate via the URL, then typed events, then a few shared singleton services — never a shared global store (that is a distributed monolith).
• Plan the costs from day one: a timeout and fallback per remote, a manifest per environment, the remote name and version in every logged error, e2e on the production combination.

Then go deeper

• Attributes are always strings: numeric/boolean inputs need numberAttribute / booleanAttribute, and objects/arrays go only through properties.
• Events do not bubble and are not composed: listen on the element itself. Use specific output names (ratingChange, not change).
• Use ViewEncapsulation.ShadowDom so the host page’s CSS does not leak in; theme through CSS variables and ::part().
• Group a team’s widgets into one bundle (one createApplication(), several define() calls), use a tag different from the component selector, and do not reuse a destroyed element — create a new one.

Then go deeper

• Prerender with parameters needs getPrerenderParams; PrerenderFallback.Server (the default) lets you prerender the top N products and render the rest on request. Every URL is a full render at build time.
• Server mode means a Node process: TTFB is at least the slowest API called during rendering, CPU per request, and module-level state shared between users.
• Correct status codes matter for SEO: set 404 through RESPONSE_INIT instead of a soft 404; caching is per route — public, s-maxage only for identical content, private, no-store for personal HTML.
• In v22 configure allowedHosts (or NG_ALLOWED_HOSTS): an unknown host gets 400 as SSRF protection. If nobody can operate a Node server, use Prerender with outputMode: 'static'.

Then go deeper

• Unlike a regular @defer, the final content is already on screen, so you can defer above the fold without layout shift.
• hydrate never is only for truly static content: it is not annotated, so nothing is replayed. Keep the @placeholder: hydrate triggers are ignored on client-side navigation.
• withIncrementalHydration() is deprecated and withEventReplay() is redundant with the default; the opt-out is withNoIncrementalHydration().
• Do not wrap components of a few KB: the extra chunk and request cost more than they save. Use CSS states (:active, :focus-visible) so users see that the click registered.

<app-product-header [product]="product()" />  <!-- hydrated at bootstrap -->

@defer (hydrate on interaction) {
  <app-gallery [images]="product().images" />  <!-- JS only at the first click -->
} @placeholder {
  <div class="gallery-skeleton"></div>         <!-- shown on client-side navigation -->
}

@defer (hydrate on viewport) {
  <app-reviews [productId]="id()" />           <!-- below the fold -->
} @placeholder {
  <div class="reviews-skeleton"></div>
}

@defer (hydrate never) { <app-footer /> }      <!-- static HTML forever -->

Then go deeper

• @if (isPlatformBrowser(…)) in a template does not throw, but Angular throws away the server DOM for that block and rebuilds it — a layout shift. Prefer @defer or afterNextRender.
• Mismatch causes: direct DOM manipulation (innerHTML, appendChild), invalid HTML (<div> inside <p>), third-party scripts, a CDN stripping comments (NG0507), and values like Date.now() that differ between platforms.
• Zoneless servers do not see your own async (fetch, SDKs, timers): use resource() or PendingTasks, otherwise the HTML leaves empty and the browser requests the data again.
• State leaks: module-level variables and useValue objects are shared by all users of the Node process; use services or useFactory.
• In a team: an SSR build in CI, a review checklist, and ngSkipHydration allowed only as a documented, temporary patch.

Then go deeper

• Loading: lazy routes, @defer for heavy content below the fold (never the LCP element), injectAsync() for heavy, rarely used services, NgOptimizedImage with priority on the LCP image, targeted imports checked with source-map-explorer.
• Rendering: OnPush + signals, track on a stable id, derivations in computed() instead of template methods; for tens of thousands of rows, CDK virtual scroll or pagination — OnPush reduces how often, not how much you render.
• Main thread: continuous calculations over ~50 ms (parsing, big filters) go into a Web Worker; transfer ArrayBuffers instead of copying huge data.
• Regression control: budgets in angular.json that fail the build, a performance check on key pages per release, and an owner for the numbers.

Then go deeper

• bypassSecurityTrust* is legitimate only for content you build and control (an embed URL from a validated id). A generic “safeHtml” pipe is a reusable XSS; search for these calls in every review.
• CSP: Angular needs a nonce for its inline styles — ngCspNonce on the root element or the CSP_NONCE token; security.autoCsp computes hashes at build time but covers only scripts and does not work with SSR.
• Roll out CSP with Content-Security-Policy-Report-Only first, otherwise lazy chunks or inline styles break in production.
• CSRF with session cookies: HttpClient sends the XSRF-TOKEN cookie as X-XSRF-TOKEN on mutating, same-origin requests — but the server must set and verify it. Every frontend check is repeated on the server.

Then go deeper

• Naive “refresh on every 401” makes N refreshes; with refresh-token rotation they invalidate each other and some servers treat reuse as an attack and kill the session.
• Mark login/refresh with an HttpContextToken (SKIP_AUTH) so the interceptor does not intercept itself, attach the token only to your API’s URLs, and if the token already changed since the request was sent, just retry.
• Only 401 triggers a refresh — 403 means “not allowed”. A failed refresh means logout, clearing stores and caches, and propagating logout to other tabs (BroadcastChannel).
• At startup, a provideAppInitializer tries a refresh before the first route. With an external OIDC provider, use a certified library instead of hand-rolling PKCE and rotation.

private refreshInFlight: Observable<string> | null = null;

refresh(): Observable<string> {
  this.refreshInFlight ??= this.http
    .post<{ accessToken: string }>('/auth/refresh', null, {
      withCredentials: true,                            // HttpOnly cookie
      context: new HttpContext().set(SKIP_AUTH, true),  // not intercepted again
    })
    .pipe(
      map((r) => r.accessToken),
      tap((t) => this.token.set(t)),                    // access token: memory only
      finalize(() => (this.refreshInFlight = null)),
      shareReplay(1),                                   // every 401 waits for the same one
    );
  return this.refreshInFlight;
}

Then go deeper

• provideBrowserGlobalErrorListeners() routes window.onerror and unhandled rejections to ErrorHandler; keep the handler simple and safe — if it throws, you lose every error.
• @boundary catches only rendering errors, not those from event handlers or async code, and a caught error is still reported to ErrorHandler.
• The interceptor rethrows after handling (throwError(() => err)) so callers can still react; a catchError(() => of([])) without logging makes bugs invisible.
• UX and operations: centralise and de-duplicate toasts (not five messages for one problem), translate technical errors into domain errors at the adapter, and attach context (route, version, remote) to every logged error.

Then go deeper

• switchMap for writes is dangerous: a cancelled save may or may not have reached the server. Writes use concatMap or exhaustMap.
• catchError goes inside the inner projection; placed after switchMap, the first failed request completes the whole stream and the search silently dies.
• A plain shareReplay(1) has refCount: false: on an infinite source (websocket, interval) it never unsubscribes. Use { bufferSize: 1, refCount: true } — knowing the cache survives only if the source completed.
• RxJS is push-based with no built-in backpressure, so you pick a policy: drop (switchMap, exhaustMap, throttleTime, auditTime, debounceTime), batch (bufferTime) or limit concurrency (mergeMap(fn, 3)). An unbounded concatMap queue on a fast source grows memory.

readonly results$ = this.query$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap((q) =>
    this.api.search(q).pipe(
      catchError((err) => {
        this.log.error(err);
        return of([]);        // inside: only this request fails, the stream lives on
      }),
    ),
  ),
  shareReplay({ bufferSize: 1, refCount: true }),
);

Then go deeper

• Since v21 the default runner is Vitest (@angular/build:unit-test); Karma is deprecated, and old suites can be moved with the experimental refactor-jasmine-vitest schematic.
• Zoneless tests: await fixture.whenStable() instead of fakeAsync, Vitest fake timers for debounce, TestBed.tick() to flush effects; inputs as signals via inputBinding.
• With ports & adapters, run one contract test suite against every adapter; CDK harnesses keep component tests independent of the DOM structure.
• In CI: nx affected plus cache for speed, no cache for non-deterministic e2e against a real backend, and coverage as a signal, not a target.

Then go deeper

• Changing the language with built-in i18n means a reload, even with loadTranslations() at runtime, because template texts are evaluated when components are created.
• Plurals need ICU, not n === 1 ? … : …: Romanian has one, few and other (“20 de fișiere”). Never concatenate sentences — word order differs between languages.
• Custom ids (@@cart.title) so translations survive source edits; dates, numbers and currency through pipes with LOCALE_ID and registerLocaleData.
• It fits SSR/prerender (one variant per locale, chosen by URL), and with hydration you add withI18nSupport(). Start on day one: adding i18n later means hunting every hard-coded string.

Then go deeper

• Choice of layer: Aria for a custom design system, CDK for low-level primitives (overlay, drag & drop, a11y utilities), Material when you want a ready-made UI fast.
• Style by the ARIA state the directives set ([aria-selected='true']), so the visual state and the accessible state cannot drift apart.
• Trade-offs elsewhere: virtual scroll removes off-screen rows from the DOM (Ctrl+F and screen readers do not see them); prefer pagination where full accessibility matters.
• Process: keyboard and screen-reader checks in the definition of done, automated checks in CI, and a11y review as part of the design system’s contract.

Then go deeper

• HTTP: fetch is the default backend and withFetch() is deprecated; upload progress needs withXhr(), and reportProgress becomes reportUploadProgress / reportDownloadProgress.
• Router and templates: paramsInheritanceStrategy: 'always' (child routes inherit params and data from all parents), ?. returns undefined like in TypeScript, a stricter compiler (inputs bound twice, data-* no longer binds inputs), CanMatchFn needs currentSnapshot.
• Platform and removals: TypeScript 6 and no Node 20; ComponentFactoryResolver, ComponentFactory and provideRoutes are gone; for SSR, configure allowedHosts and drop withIncrementalHydration().
• Rollout: an upgrade branch kept green in CI, libraries and Node/TS bumped first, e2e on critical flows, then a follow-up plan to remove Eager feature by feature instead of treating it as permanent.