All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 250
![Angular Two-Way Binding: [(ngModel)]](/_next/image?url=https%3A%2F%2Fangular.dev%2Fassets%2Fimages%2Fng-image.jpg&w=1600&q=75)
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.
Vue's v-model: Two-Way Binding Made Simple
v-model creates a two-way binding that synchronizes form inputs with your JavaScript data. Use it on any form element like an input or textarea. The footgun: it ignores initial HTML attributes; your JavaScript state is always the single source of truth.
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.
Vue's v-if vs. v-show: When to Use Which
v-if adds or removes elements from the DOM; v-show just hides them with CSS. Use v-if for conditions that rarely change (like admin access) and v-show for frequent toggles (like a dropdown menu), as it has a lower toggle cost.
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.
Svelte Slot Props: Child Informs, Parent Renders
Svelte slot props let a child component pass data up to its parent's slot. This is key for reusable list components where the child provides data for each item, but the parent controls the rendering. The footgun: the let: directive goes on the component tag.
Svelte Context API: Avoid Prop-Drilling
Svelte's Context API lets a parent component provide data to any descendant, avoiding 'prop-drilling'. It's ideal for sharing app-wide state like user info or themes. The key footgun: calling getContext without a parent setContext will throw an error.
Vue Provide/Inject: Skip Prop Drilling
Vue's provide/inject lets an ancestor component share data directly with any descendant, avoiding the tedious 'prop drilling' chain. Use it for app-wide data like user info or theme settings. The footgun: providing a simple value is not reactive by default.
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.
Vue Slots: Projecting Content into Components
Think of a Vue slot as a picture frame: the child component defines the frame, and the parent provides the picture. This is used for reusable layouts or buttons where the structure is fixed but the content is dynamic.
Handling Basic DOM Events in Svelte
Svelte handles DOM events with on:eventname syntax in your markup, linking elements to functions in your script. This is for user interactions within a component, not for parent-child communication. The footgun is confusing this with custom component events.
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.
Vue Custom Events: Child-to-Parent Communication
Think of $emit as a child component sending a flare up to its parent. It's how children report actions upwards, reversing the top-down flow of props. Use it to trigger parent state changes, like closing a modal. The footgun: events don't bubble.
Svelte Props: Passing Data with `export let`
In Svelte, export let turns a variable into a prop, letting a parent component pass data down. It's how you pass a userName to a ProfileCard component. The footgun: forgetting export creates a private variable, not a prop, so data isn't received.
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.
Vue Component Props: Passing Data Downstream
Think of props as a component's 'arguments.' They let a parent pass data down to a child, making it reusable. Use them to pass dynamic data like a user's name to a profile card. The footgun: never mutate a prop directly inside the child component.
Vite's Dependency Pre-Bundling
Vite's dev server pre-bundles dependencies to accelerate local development. It converts CommonJS modules to browser-native ESM and merges packages with many files into one, preventing massive HTTP request chains.
SvelteKit Hooks: Intercepting Requests and Events
SvelteKit Hooks are like middleware, letting you intercept requests and events to run app-wide logic. Use them for tasks like authentication checks, initializing DB clients, or custom routing.
Vite's Low-Level SSR API
Vite's SSR API lets you run Vite as a middleware inside your own Node.js server, giving you full control over rendering. It's for building custom SSR solutions, often with Express. The footgun: most apps should use a higher-level SSR plugin, not this API.