Angular
122 bites tagged Angular — interview questions with model answers, and 60-second explainers.
<ng-container>: Group Elements Without a DOM Footprint
<ng-container> is an Angular grouping element that doesn't render to the DOM. Use it to apply a structural directive like *ngIf to multiple elements without adding an extra <div> that could break your layout.
Angular Template Reference Variables: A #handle for Elements
A template reference variable is a handle to a DOM element or component within your template. Use the `#varName` syntax to grab an input's value or call a child component's method. Its scope is limited to the template where it's defined.
Container vs. Presentational: A Component Separation Pattern
Split components into 'smart' containers that handle data and logic, and 'dumb' presentational components that just render UI. This lets you reuse state across different views, like showing a product list in a grid or a table.
Angular Schematics: Automating Code Modification Safely
Think of a schematic as a safe, scriptable code generator. It operates on a virtual copy of your project, applying changes only after verifying the entire operation. Use them to enforce conventions or package library code.
Module Federation: The Multi-Framework "Hydra"
Module Federation can unite micro frontends from different frameworks (e.g., Angular, React) in one app. This is a last resort for migrations or integrating legacy code, not a standard pattern, as it increases complexity and bundle size.
Angular's angular.json: Your Workspace Blueprint
angular.json is the blueprint for your workspace, telling the CLI how to build, serve, and generate code. It defines project paths, build targets, and default prefixes. The footgun: assuming the `projects` section mirrors the file system.
ng generate: Your Project's Code Wizard
ng generate is a command-line wizard for scaffolding new Angular features. It doesn't just create files; it wires them into your app. Use `ng g component my-component` to create components, services, and more.
Angular's Default Change Detection with Zone.js
Zone.js tells Angular to re-check your entire app whenever any async event finishes. This is Angular's default magic: a variable updates after an HTTP call, and the UI just works. The footgun? This "check everything" approach is expensive in large apps.
Angular NgModules: Organizing Legacy Code
Think of an NgModule as a shipping container for related features, bundling components, directives, and pipes. You'll find them organizing code in older Angular apps.
Angular: Run Code Only on Browser or Server
Angular Universal runs your app twice: on a server and in a browser. Use `isPlatformBrowser` to run code only where it's safe, like accessing `window` or `document`, to prevent your server-side render from crashing.
Angular TransferState: Avoid Double Data Fetching in SSR
TransferState is a key-value cache that bridges your Angular SSR server and the browser, preventing the client from re-fetching data the server already got. Use it to pass resolved API data from the server render to the client, avoiding wasted network calls.
Angular Incremental Compilation: Faster Rebuilds
Angular's incremental compilation avoids full rebuilds by tracking changes, making performance proportional to what you changed, not the whole app. It speeds up development by reusing analysis and skipping file generation for unchanged code.
Framework Reactivity: Coarse vs. Fine-Grained Updates
Frameworks sync UI and state differently. Coarse-grained systems like React re-run component code, while fine-grained systems like Vue (Proxies) or Angular (Signals) track dependencies to update only what's needed.
Configuring the Angular Compiler (ngc)
The Angular Compiler (ngc) transforms your templates into optimized JavaScript ahead-of-time. You tune it in `tsconfig.json` to create smaller production builds or publish reusable libraries.
Angular Ivy: The Tree-Shakable Compiler
Angular's Ivy engine compiles components like separate puzzle pieces, making apps smaller and faster. This enables effective tree-shaking for smaller bundles and faster rebuilds.
Angular's TestBed: A Sandbox for Component Testing
Angular's TestBed creates a mini-app just for your test, letting you check how a component renders and behaves with mock dependencies. It's for testing component-template interactions in isolation.
Cypress Component Testing: Test in a Real Browser
Cypress component testing mounts your UI components in a real browser, not a simulated DOM, so you test them exactly as users see them. Use it for faster feedback on individual React, Vue, or Angular components.
Angular Unit Testing: Jasmine & Karma
Jasmine is your testing script (`expect(a).toBe(b)`), while Karma is the stage that runs it in a browser. This is Angular's default stack for unit testing components and services to ensure they work in isolation.
Angular's ChangeDetectorRef: Manually Triggering Updates
Angular's `ChangeDetectorRef` is your manual override for change detection. Use it when updates from outside Angular's zone (like third-party libraries) don't refresh the UI. The footgun is overuse, which can mask performance issues or cause lifecycle errors.
Angular's OnPush: Faster Apps by Doing Less
OnPush tells Angular to only re-render a component when its inputs change or its own events fire, not on every global event. It's a key performance boost for large apps, but mutating an input object directly won't trigger a re-render, causing a stale UI.
Angular AOT: Compile Before the Browser
Angular's AOT compiler converts your app into efficient JavaScript during the build process, not in the browser. This means faster rendering and smaller bundles, as the compiler itself isn't shipped.
Angular HttpInterceptor: A Pipeline for API Requests
Think of an HttpInterceptor as a pipeline for every API call, letting you inspect or modify requests and responses globally. Use it to automatically add auth headers or show a loading spinner.
Angular Custom Attribute Directives
An Angular attribute directive changes the appearance or behavior of an existing DOM element without adding a new one, applied as a plain HTML attribute so reusable behavior like hover effects or validation can be attached declaratively across many templates.
Angular Custom Pipes: Transform Data in Your Templates
An Angular custom pipe is a reusable formatting function for your templates. Use it for common display transformations like currency or date formatting, keeping your component logic clean. Footgun: Avoid slow logic; pipes run often and can kill performance.
Get Angular bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.