Angular
122 bites tagged Angular — interview questions with model answers, and 60-second explainers.
Implement a scoped slot pattern in a reusable DataList
It tests delegating rendering while keeping data ownership in the child. A strong answer covers a DataList that fetches internally and exposes rows via slot props, plus Angular TemplateRef via let-item. Red flag: parent loops or slots inheriting child scope.
What bindings do v-model and ngModel sugar, and why?
V-model sugars value and input; ngModel sugars [value] and (ngModelChange). This enforces one-way data flow for predictable state. If you know two-way binding is property binding plus an event.
How do you emit events from a child to parent component?
This probes unidirectional data flow and child-to-parent event emission. In Vue, call $emit with a named event and payload; in Angular, use @Output with EventEmitter and emit the query. A red flag is suggesting two-way binding or direct parent mutation.
Primary mechanism for passing data from parent to child component
Tests unidirectional parent-to-child data flow and explicit component contracts. A strong answer names props or inputs, explains one-way binding, and warns against direct child mutation. Red flag: confusing props with global state or events.
How would you implement lazy loading for an Angular feature module?
This tests route-level code splitting and CLI workflows. A great answer hits: ng generate module, loadChildren in the route config, and excluding the feature from AppModule. A red flag is suggesting manual chunking instead of router-driven lazy loading.
Describe two key Angular CLI production build optimizations
Tests whether you know architect targets and concrete production optimizations. Strong answers name two of: dead code elimination and minification, hashed filenames for cache busting, or disabled source maps.
How do you configure Angular CLI dev server proxying?
Tests Angular CLI proxying to bypass CORS locally. Good answer: create proxy.conf.json with target and path, register it in angular.json serve options as proxyConfig, then restart ng serve.
ng serve purpose and fundamental difference from ng build
Ng serve compiles in memory and serves via a dev server with live reload, while ng build writes output to dist/. Understanding in-memory dev serving versus disk builds. Believing ng serve writes files to disk.
Svelte compiler downsides vs Vue and Angular runtime
Tests compile-time versus runtime trade-offs in large apps. Strong answers address dynamic component limits, plugin friction, build scalability, and migration cost. Red flag: claiming Svelte has no runtime or that dynamic components are impossible.
How would Angular vs Vue philosophies influence your large-scale architecture choice?
Tests mapping philosophy to team scale. Contrast Angular's opinionated batteries-included tooling and two-way binding with Vue's progressive incremental adoption and Composition API; pick Angular for standards or Vue for flexibility.
Why is DI central to Angular architecture versus Vue's module system?
Tests architectural grasp of inversion of control. Angular DI enables hierarchical injectors, tree-shakable providers, and runtime substitution without direct imports unlike Vue modules. Red flag: calling DI mere convenience or claiming Vue matches Angular DI.
What out-of-the-box Angular features require manual setup in Vue or Svelte?
Tests whether you understand framework scope tradeoffs. A strong answer cites first-party routing, forms, dependency injection, and Signals, then contrasts them with Vue or Svelte's add-on ecosystem.
Angular JIT: Runtime Template Compilation
Angular JIT ships the compiler to the browser and builds components on the fly. It speeds up development rebuilds but pushes compilation cost to runtime. The footgun is deploying it to production, bloating bundles and hiding template errors until runtime.
Observable: Angular's Push-Based Data Stream
An Observable is a lazy push collection that emits values over time. Angular uses it for HTTP and events, letting components react instead of polling. Forgetting to unsubscribe leaks memory and keeps destroyed components alive.
Angular Schematics: Blueprint Robots with Rollback
Angular Schematics draft changes on a virtual file tree before touching disk. Use them to generate components, enforce standards, or run automated migrations. Never write directly to disk inside a schematic or you break atomic rollback.
Angular Universal: Hybrid Rendering for Faster Apps
Angular Universal enables hybrid rendering, letting you choose where each page is built: on the server (SSR), at build time (SSG), or in the browser (CSR). This improves load times and SEO. The footgun is misconfiguring routes, negating performance gains.
Testing NgRx Effects: Isolate and Verify Side Effects
Test NgRx Effects by treating them as pipelines that transform action streams. Provide a source action and mock dependencies to verify the effect dispatches the correct success or failure action.
Angular Lazy Loading: Ship Less Code Upfront
Think of your app as an encyclopedia. Lazy loading only fetches the volume (feature module) you need, when you need it, instead of loading the whole set upfront. Use it for distinct sections like dashboards.
NgRx Selectors: Memoized Queries for Your State
NgRx selectors are smart, cached queries for your app's state. They use memoization to avoid re-computing derived data if the underlying state hasn't changed. This prevents needless re-renders.
Angular Route Resolvers: Fetch Data Before Navigation
An Angular Route Resolver pre-fetches data, ensuring it's ready *before* your component renders. Use it to load critical data for a route, like a user profile, to avoid showing a loading spinner. The footgun: a slow resolver blocks navigation entirely.
NgRx Effects
NgRx Effects handle side effects, like API calls, outside of reducers and components by listening to the stream of dispatched actions and, when a matching action appears, running async work and dispatching a new action with the result.
NgRx Store: Reactive State Management for Angular
NgRx Store is a centralized database for your Angular app's frontend state, providing a single source of truth. Use it in large apps to manage complex, shared state like user sessions. The main footgun is overusing it for simple, local state.
Angular's `async` Pipe: Manage Observables in Templates
Angular's `async` pipe is a self-managing subscription for your templates. It unwraps values from Observables or Promises directly in your HTML, triggering updates on new emissions. It automatically unsubscribes, preventing the common footgun of memory leaks.
Angular's ng-template: Reusable UI Blueprints
ng-template defines a reusable UI blueprint that isn't rendered by default. Use it with ngTemplateOutlet to create configurable components, like passing a custom item layout to a generic list.
Get Angular bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.