Angular Expert

Preview — 3 of 10 questions

What is zoneless mode and why is it a major evolution?

javascript

// app.config.ts
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    // No zone.js import in polyfills!
  ],
});

AZoneless mode removes change detection — components no longer update

BZoneless mode is only compatible with OnPush components

CIn zoneless mode, Angular no longer uses Zone.js to trigger change detection. Reactivity relies entirely on Signals, markForCheck(), and async pipes. This shrinks the bundle (~13kB), improves performance, and enables use in environments without Zone.js (Web Workers, micro-frontends)

DZone.js is still required in zoneless mode for Promises and setTimeout

How does the Ivy compiler optimize template rendering?

javascript

// Angular's compiler transforms this template:
@Component({
  template: `<button (click)="save()">{{ label }}</button>`
})

// Into roughly this runtime code (simplified):
// ɵɵelementStart(0, 'button');
// ɵɵlistener('click', function() { ctx.save(); });
// ɵɵtext(1);
// ɵɵelementEnd();
// Update function:
// ɵɵtextInterpolate(ctx.label);

AIvy compiles templates into render instructions that are invoked directly (no intermediate AST). Each component carries its own render factory, enabling tree-shaking at the component level and eliminating unused component code

BThe Angular compiler generates interpreted code at runtime — there is no build-time compilation

CAngular uses a Virtual DOM like React to diff trees before updating the DOM

DThe Ivy compiler is identical to the View Engine compiler — only the name changed

How does signalStore() from @ngrx/signals replace traditional state management?

javascript

import { signalStore, withState, withComputed, withMethods } from '@ngrx/signals';
import { withEntities, setAllEntities } from '@ngrx/signals/entities';

type User = { id: string; name: string; plan: 'FREE' | 'PRO' };

export const UserStore = signalStore(
  withState({ isLoading: false, error: null as string | null }),
  withEntities<User>(),
  withComputed(({ entities }) => ({
    proUsers: computed(() => entities().filter(u => u.plan === 'PRO')),
  })),
  withMethods((store, userService = inject(UserService)) => ({
    async loadUsers() {
      patchState(store, { isLoading: true });
      const users = await userService.getAll();
      patchState(store, setAllEntities(users), { isLoading: false });
    },
  })),
);

AsignalStore() requires Redux DevTools and a global store configuration like traditional NgRx

BsignalStore() cannot perform asynchronous operations

CwithEntities() is only compatible with entities that have an id field of type number

DsignalStore() creates an injectable Signal-based store, composable by feature (with*). No actions, no reducers, no separate selectors — the logic is co-located and the store is a standard injectable service

Answer all 10 questions (7 more), see explanations for every answer, and track your score.