Angular Expert — Series 3

Preview — 3 of 10 questions

Angular's Ivy compiler is often described as following a locality principle. What does that mean?

AIvy only compiles components that are visible in the current viewport

BIvy requires all components to be declared in the same file as their template

CIvy can compile a component into its final instructions using only that component's own metadata and its direct type references — it never needs whole-program information the way View Engine's compiler did, which is what makes true per-component AOT compilation, incremental builds, and standalone library publishing practical

DIvy always inlines every dependency's compiled output into the consuming component's own bundle

What do onInit and onDestroy correspond to?

javascript

export const UserStore = signalStore(
  withState({ id: 0 }),
  withHooks({
    onInit(store) {
      console.log('store ready', store.id());
    },
    onDestroy(store) {
      console.log('cleaning up');
    },
  }),
);

ALifecycle callbacks tied to the store's own instantiation and destruction — onInit runs once the store (and every feature composed before it) has finished being built, and onDestroy runs when the injector that provided the store is destroyed, mirroring ngOnInit/ngOnDestroy but for the store itself rather than a component

BCallbacks that run on every state change, functioning like a global reducer

CAngular testing hooks only invoked inside TestBed

DAliases for ngOnInit/ngOnDestroy that must be manually called from the component using the store

What does the *appPermission="'admin'" shorthand actually desugar to?

javascript

@Directive({ selector: '[appPermission]' })
export class PermissionDirective {
  @Input() appPermission!: string;
}

A<appPermission [value]="'admin'"><div>Admin only</div></appPermission>

BIt's invalid without a matching let binding

C<div [appPermission]="'admin'">Admin only</div> — the property binding stays on the same element

D<ng-template [appPermission]="'admin'"><div>Admin only</div></ng-template> — Angular's structural-directive microsyntax moves the host element and its content inside an <ng-template>, and binds the directive's input whose name matches the selector to the expression after =

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