Angular
122 bites tagged Angular — interview questions with model answers, and 60-second explainers.
Angular Services: Your App's Shared Toolbox
An Angular service is a shared toolbox for your app. Instead of components building their own tools (like an HTTP client), they request a single instance from the dependency injector.
Angular: Reading URL Query Parameters
Angular gives you two ways to read URL query params: a static `snapshot` for the initial value, or a `queryParams` Observable for live updates. Use it for values like `?search=term`.
Nested Routes: Mapping URLs to Component Trees
Nested routes map URL segments to components inside other components, like a sub-page within a main layout. This is common for user dashboards with sections like 'profile' and 'settings'. The footgun is forgetting the child router outlet.
RouterLink: Client-Side Navigation in Angular
RouterLink is Angular's replacement for `<a>` tags, preventing full page reloads in a Single-Page App. Use it on any element to navigate between views. The common footgun is using a standard `<a href="...">`, which reloads the page and loses application state.
SSR Hydration: Don't Re-render, Reuse
Hydration tells your client-side app to reuse the HTML sent by the server instead of wastefully re-rendering it. This prevents UI flicker in Server-Side Rendered apps and improves load performance.
Angular HttpClient: Your App's API Connector
Angular's HttpClient turns network requests into RxJS Observables. Use it to fetch data or submit forms. The footgun: a request is never sent until you subscribe to the Observable it returns, a common mistake for beginners.
Using Angular Services for Simple State Management
An Angular service acts like a central data store. Components subscribe to it for data, rather than owning state, keeping data consistent across views. It's ideal for sharing user info or cart contents.
Angular Custom Validators: Beyond Built-in Rules
Custom validators let you define your own business logic for form inputs. Use them to check for unique usernames via an API or enforce complex password rules. The main footgun is forgetting async validators must return an Observable or Promise.
Angular's Reactive Form Classes: FormControl, FormGroup, FormArray
Reactive forms build a data model in your code, not the template. Use `FormControl` for one input, `FormGroup` for a set of fields like a login form, and `FormArray` for dynamic lists. The main footgun is forgetting to import `ReactiveFormsModule`.
Angular's Built-in Form Validators
Angular's built-in validators are pre-made rules for your forms. Use them to easily check for required fields, min/max length, and valid email formats. The footgun is confusing `required` for text inputs with `requiredTrue`, which is only for checkboxes.
Angular Template-Driven Forms: Logic in the HTML
Angular Template-Driven Forms put form logic directly in your HTML template. Using two-way data binding with `[(ngModel)]`, they're great for simple scenarios like login or contact forms.
Angular Component Styles: Scoped by Default
Angular styles are scoped to their component by default, preventing one component's styles from accidentally breaking another. This lets you build reusable UI pieces without style conflicts. The footgun is using `::ng-deep`, which breaks this isolation.
ngOnChanges: Reacting to Input Property Changes
The `ngOnChanges` hook is a property watcher for child components, firing when a parent changes an `@Input()` value. It's used to trigger logic when specific data changes.
Angular Component Lifecycle Hooks
Angular's lifecycle hooks are callbacks for a component's life events: creation, updates, and destruction. Use ngOnInit for one-time setup after inputs are ready, and ngOnChanges to react to input changes. The footgun: don't use the constructor for setup.
*ngFor trackBy: Smarter DOM Updates in Angular
*ngFor's `trackBy` tells Angular how to uniquely identify items in a list. This prevents it from destroying and recreating the entire list in the DOM on every data update, instead allowing it to reuse existing elements.
Angular Two-Way Binding: [(ngModel)]
Think of [(ngModel)] as a walkie-talkie for data, syncing a component property with a template view. It's used in forms where user input immediately updates a variable, and vice-versa. The footgun is overusing it, which creates tangled data flows.
Angular Structural Directives: Shape Your DOM
Structural directives shape your DOM by adding, removing, or manipulating HTML elements. Use *ngIf to show/hide a block or *ngFor to loop over a list. The footgun is forgetting the asterisk (*), which is critical syntactic sugar for a more complex template.
Angular: Dynamic Component Loading
Programmatically create and render components anywhere in your app, not just where you've hardcoded them. Use it for dynamic dashboards or modal dialogs. The footgun is forgetting to manually destroy components, which leads to memory leaks.
Angular View Encapsulation: Walling Off Your Component Styles
View Encapsulation walls off a component's CSS to prevent styles from leaking in or out. By default, Angular emulates a Shadow DOM to scope styles, but you can change this. The footgun is using `None` to fix a style, creating global CSS conflicts.
Angular Content Projection with ng-content
ng-content creates a "slot" in a component's template, letting you project parent content into it. Use this for reusable wrappers like cards or dialogs. The key footgun: never use @if on ng-content, as the content is always rendered, even if hidden.
Angular @Output(): Child Components Reporting Up
An @Output() lets a child component tell its parent something happened, using an EventEmitter. It’s the standard way to handle events like button clicks that the parent needs to act on. The footgun is forgetting to actually `.emit()` the event.
Angular's input() Function: Passing Data to Components
Angular's input() function lets a parent pass data to a child, defining the child's public API. Use it to configure a component, like passing a `value` to a slider. The footgun: the returned signal is read-only; the child cannot modify its own input.
ng new: Your Angular Project Starter Kit
The `ng new` command is your starter kit for any Angular project. It scaffolds a complete, runnable application with a standard folder structure and dependencies, letting you skip manual setup.
Angular's Hierarchical Dependency Injection
Angular's DI is a tree of injectors mirroring your components. When a component needs a service, Angular walks up the tree to find the first provider. Use it to scope services to UI branches, but beware: providing at a component level creates a new instance.
Get Angular bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.