Skip to content

Instantly share code, notes, and snippets.

@vslipchenko

vslipchenko/Angular.md

Last active November 11, 2025 09:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vslipchenko/11b01faa940655c41072396897e07de7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vslipchenko/11b01faa940655c41072396897e07de7 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Framework Topics (organized) Up to v20
Raw
Angular.md

Angular framework topics organized in levels (from simple L1 to harder L5)

Level 1

  • What is standalone API?
    • What standalone APIs do you know? (Standalone components/pipes/directives, Router standalone API, HttpClient standalone API, etc.)
    • What are benefits of using them? (less boilerplate, no dependency on modules - module-less, smaller bundle size, concise code, possibility of dropping ZoneJS, etc.)
  • Explain the main building blocks of an Angular application and their data flow
    • components
    • directives
    • services
    • pipes
    • modules (*obsolete: prefer standalone/module-less approach)
  • Differences between component and directive
  • Structural vs attribute directives
  • New control flow syntax (@if @else, @for @empty, @switch @case @default)
  • Template variables (@let)
  • What is the difference between constructor and ngOnInit?
  • Inputs and Outputs
    • @Input and @Output decorators (*obsolete: prefer signal-based inputs and outputs)
    • Signal-based inputs (input())
      • Writeable inputs (model())
      • Required inputs (input.required(), model.required())
    • Signal-based outputs (output())
    • What configuration options do inputs and outputs have? (e.g. alias, transform)
  • What is a data binding?
    • Two-way binding
    • Event binding
    • Property binding
    • Attribute binding
  • RxJS
    • The concepts of observables:
      • Concept
      • How to create
      • What is the difference between promise and observable?
      • Operators (map, filter, tap, take, first, endWith, finalize)
  • Angular Router
    • How SPA based navigation works?
    • Router events
    • How do you detect route change in Angular?
    • Lazy loading
    • Title property

Level 2

  • Lifecycle hooks
    • Name and provide a short description to each one of them
    • In what order do they get executed?
    • Lifecycle functions afterEveryRender and afterNextRender
  • What is the purpose of async pipe?
  • What are root module (*obsolete: prefer standalone/module-less approach) and bootstrapping?
  • Signals
    • What is the purpose of signals?
    • Common API to work with signals (signal(), linkedSignal(), computed(), effect())
    • How to read/write a signal value? (read: value(), write: .set(), .update())
    • How to make a signal immutable? (.asReadonly() disables .set() and .update() methods)
    • Difference between signals and RxJS observables
    • Signals and RxJS interoperability (toSignal, toObservable)
    • Why is it discouraged to update signals inside computed? (to avoid recursive updates if the signal used in a computed property is updated within it)
  • RxJS
    • Operators (switchMap, mergeMap, etc.)
  • Extended template expression syntax ('**' and 'in' operators, untagged template literals)
  • Angular Router
    • Guards (class-based guards, functional guards)
      • What guards do you know? (CanActivate, CanActivateChild, CanDeactivate, CanMatch)
    • Resolvers (class-based resolvers implementing Resolve, functional resolvers of type ResolveFn)
    • Guards and Resolvers use cases
    • RouteReuseStrategy
    • TitleStrategy and Title service
    • Route data, path params, and query params binding to component inputs (bindToComponentInputs property, withComponentInputBinding())
  • Internationalization
    • Difference between internationalization and localization
    • What is the default value for source locale in Angular? (en-US)
  • Testing
    • Difference between end-to-end and unit testing
    • What is matcher and what matchers do you know? (toEqual, ToBe, etc.)

Level 3

  • Understanding configurable modules (*obsolete: prefer standalone/module-less approach)
    • Module with providers approach
    • forRoot, forChild/forFeature approach
  • What is the purpose of common, core, feature modules? (*obsolete: prefer standalone/module-less approach)
  • What loading strategies exist in Angular? (eager loading, lazy loading, pre-loading)
  • Deferrable views (@defer, @loading, @error, @placeholder)
    • What are common use cases?
    • What triggers does @defer have? (on idle/immediate/interaction/hover/timer/viewport)
  • What is the concept behind DI and what problems it solves?
    • How is Dependency Hierarchy formed?
    • What is Injector?
    • What is inject() and how is it different from other DI approaches?
    • Types of providers
    • What is a DI token?
    • How to run logic during app initialization? (provideAppInitializer())
    • What kind of problems forwardRef solves?
    • @Injectable decorator
    • Constructor parameter decorators @Inject, @Optional, @Self, @SkipSelf, @Host
    • Tree-shakable Dependencies in Angular Projects with provideIn
    • Injecting parent components / directives into child components / directives
  • How internally async pipe works?
  • What is the difference between pure and impure pipe?
  • Ways of listening to DOM events in Angular
  • Component 'host' binding (e.g., @Component({..., host: {'[class.active]': 'isActive()', '(keydown)': 'updateValue()'}}))
  • Purpose of @HostBinding and @HostListener decorators (*obsolete: prefer component 'host' binding)
  • Angular DOM manipulation techniques using: ElementRef, TemplateRef, ViewContainerRef
  • Content and view:
    • Understanding decorator-based queries (@ViewChild, @ViewChildren, @ContentChild, @ContentChildren); QueryList (*obsolete: prefer signal-based queries)
    • Signal-based queries
      • View queries (viewChild(), viewChildren())
      • Content queries (contentChild(), contentChildren())
      • Required queries (viewChild.required(), contentChild.required())
    • ng-content and single-slot/multi-slot content projection
    • NgOptimizedImage - directive for enhanced image handling and optimization
  • RxJS
    • How to perform error handling in observables?
    • How to perform side effect in observables?
    • Memory leaks caused by unmanaged subscriptions
    • Is it required to unsubscribe from HttpClient requests?
    • Available unsubscription options (.unsubscribe(), DestroyRef, first/take/takeWhile/takeUntil/takeUntilDestroyed operators, AsyncPipe-managed subscriptions, etc.)
    • Hot / Cold observables (unicast / multicast)
    • Streams combination: (combineLatest, merge, forkJoin, withLatestFrom)
    • Subject types (Subject, BehaviorSubject, ReplaySubject, AsyncSubject)
    • Operators (race, zip, scan, reduce)
    • Difference between switchMap and mergeMap
    • Convert observable to promise and vice versa
    • Polling/Throttling (approach, interval, delay)
    • Scheduler (null, queueScheduler, asapScheduler, asyncScheduler, animationFrameScheduler)
    • Ways to create custom operator
  • Change detection mechanism
    • NgZone with zone.js
    • NgZone: how to execute code and don't trigger Angular change detection
    • "Expression has changed after it was checked" what is the cause of this error, ways to fix it
    • Triggering change detection manually in Angular
    • OnPush change detection strategy
    • How to disable zone.js and why we'd do this?
    • How would you control changes with zone.js disabled (by relying on signals, signal-based inputs and outputs, async pipes)
    • Difference between ChangeDetectorRef.detectChanges() and ChangeDetectorRef.markForCheck()
  • Forms
    • Template-driven vs Reactive forms
    • Typed / untyped reactive forms (FormControl<TValue = any>, UntypedFormControl)
    • Using ControlValueAccessor to create custom form controls in Angular
    • Nested Forms
    • Types of validators (synchronous/asynchronous)
    • Using Validator to create custom plug-in validation directives
    • Understanding of custom control value accessor / validator application process (how angular uses it)
  • Angular Router
    • Params inheritance strategies 'emptyOnly' and 'always', what's the difference?
    • Relative link resolution 'legacy' and 'corrected', what's the difference?
  • Reactive HTTP requests (httpResource())
  • HttpInterceptors: the purpose, how to register interceptor
    • How to dispatch the request (API call) avoiding http interceptors? (HttpBackend)
    • Functional interceptors (HttpInterceptorFn)
  • Template variables
    • Visibility scope (if used inside structural directive and referenced outside)
    • Value of template variable based on usage scenario (e.g. on component / dom node / directive)
  • Internationalization
    • Difference between compile time and runtime translation? What benefits each one of them has? Which one does Angular use?
    • What is LOCALE_ID and what is it for?
    • What is the purpose of i18n attribute and $localize?
    • What is i18n metadata and its parameters? (meaning, description, custom id)
  • Testing
    • General testing concepts
      • Mocking and stubbing
      • Working with http calls in tests
    • What is fakeAsync zone and its usage scenarios?
  • Proxy
    • How to divert certain URLs to a backend server? (proxy.conf.json, proxy.conf.mjs, HttpsProxyAgent)

Level 4

  • Angular Material CDK
  • Dynamic templates, dynamic component instantiation (createComponent())
  • State management approaches
    • Vanilla RxJS
    • Signals
    • NgRx
    • NGXS
  • What is a service worker and its role in Angular?
    • What are the design goals of service workers?
  • What are the advantages with AOT?
    • What are the restrictions?
    • What are the tree phases of AOT?
  • What is Angular Ivy?
    • Difference between Incremental and Virtual DOM
    • Ivy change detection execution
  • Explain bootstrapping process
  • Compilation in Angular
    • Difference between JIT and AOT
    • Why do we need compilation process?
  • What is Angular SSR?
    • What is hydration?
      • Full app non-destructive hydration
    • Why use SSR?
    • Workarounds for browser APIs
  • Internationalization
    • What steps should you perform in order to localize your Angular app? (install @angular/localize, tweak angular.json, mark corresponding template tags with i18n attribute, run ng extract-i18n cli command, add / update desired locale files, run ng build --localize, may include additional server setup to handle routing to a different versions of the app)
  • Angular performance tips
    • Zoneless
    • ChangeDetectionStrategy.OnPush
    • Event coalescing (part of NgZoneOptions)
    • trackBy
    • Memoization
    • Pure pipes
    • Avoid zone pollution (if app is depending on ZoneJS), out of bounds change detection, unnecessary recalculations, large component trees
  • What is Directive composition API?
    • How it helps? Use case examples?
  • How to implement directive type checking? (ngTemplateContextGuard, ngTemplateGuard_)

Level 5

  • Module SCAM pattern (*obsolete: prefer standalone/module-less approach)
  • Profiling and debugging Angular apps
  • Generating code using custom schematics
  • Angular custom elements
  • Micro-frontend in Angular (Angular module federation, Angular native federation, Custom elements/Web components, single-spa/single-spa-angular etc.)
  • Angular and AI (Genkit, llms.txt and llms-full.txt, MCP)

Resources:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment