Components
78 bites tagged Components — interview questions with model answers, and 60-second explainers.
Building a scalable icon system in Figma
Standardize a grid, size, and stroke; make each icon a component with consistent naming, use currentColor-friendly single-color paths, and export optimized SVGs. Systematic, dev-friendly icon design.
View vs Text and nesting rules
View is a flexbox layout container; Text renders and lays out text with inheritance. Text nests inside Text and inherits style; View inside Text is constrained and discouraged. layout vs text primitives.
Contributing a new component variant
Align with maintainers first, follow guidelines, implement with API and tokens, add stories, docs, and tests, then open a PR for review. understanding of design-system contribution flow.
Building a container-query-driven card component
Declare a wrapper container with container-type, query it with @container, restyle the card's internal grid by container width, optionally use cqi units. applied container query mechanics.
When container queries beat media queries
Media queries react to viewport, container queries react to a parent's size, ideal for reusable components; set container-type on an ancestor then query it. understanding of component-level responsiveness.
Documenting a single UI component
Purpose and when to use, a props API table, live examples of variants and states, accessibility notes, and do and don't guidance. Knowing what good component docs contain. documenting only the prop list with no usage guidance.
Customize a Button without !important
Expose CSS custom properties as a styling API, accept className or style overrides, keep internal selectors low specificity so overrides win cleanly. designed-in customization. reaching for !important.
Reusable Button with hover, focus, disabled
Use a real <button>, style :hover, a visible :focus-visible ring, and the [disabled] attribute that also blocks interaction. semantic, accessible button states. a clickable <div> or removing focus outlines.
Component versus pattern in a design system
A component is a single reusable UI building block; a pattern is a documented way of composing components to solve a recurring problem. vocabulary precision. using the two terms interchangeably.
Purpose of a design system for developers
A single source of truth of reusable components and tokens that ensures consistency, speeds delivery, and centralizes accessibility. why design systems exist. calling it just a component library or a style guide PDF.
Build a DRY button with Sass maps and mixins
A base mixin for shared button styles, a variants map of name to colors looped to generate modifiers, and a sizes map looped for sizing. applying Sass abstractions to real components.
Documentation for a new Card component
Usage guidance and do/don't, variants, accessibility, code examples, composition. complete component docs, not just an API table. shipping only a props table with no when-to-use, accessibility, or examples.
Documenting accessibility per component
Per-component a11y sections, keyboard tables, ARIA roles and states, live examples. making accessibility actionable, not a generic page. one global accessibility page with no component-specific keyboard or ARIA detail.
Rolling out a breaking change to a shared Button
Major semver bump, deprecation period, codemod and migration guide, staged comms. managing a breaking change in a high-blast-radius component. forcing an immediate hard cutover with no deprecation window or upgrade tooling.
What is the difference between ChangeDetectionStrategy.Default and ChangeDetectionStrategy.OnPush in Angular?
Default checks components on most async events; OnPush checks on input changes, DOM events, or async pipe emits. Angular change detection and subtree skipping. OnPush is not a free switch; it requires immutable data.
How do you mock an async service call in an Angular component test?
This tests Angular unit isolation and HTTP mocking. A strong answer covers HttpTestingController setup, flushing a mock response, asserting UI changes, and notes mocking avoids flaky networks. Red flag: using real HTTP calls in unit tests.
What is Angular's TestBed and when would you use it?
Say createComponent returns a fixture with no immediate binding, so await fixture.whenStable before asserting DOM. Your knowledge of TestBed as the component factory and change-detection controller.
Compare Angular's three ViewEncapsulation modes and give a use case.
This tests style isolation tradeoffs. Emulated scopes CSS with unique attributes, ShadowDom uses native shadow roots, and None disables scoping. Switch to ShadowDom for strict boundaries or None for global themes.
What is Angular's default style encapsulation mechanism called?
Tests if you know Angular's default view encapsulation. A strong answer names ViewEncapsulation.Emulated, describes the unique attribute selector rewrite, and warns that global styles still pierce inward.
What is ngOnInit's purpose and why prefer it over the constructor?
Tests Angular lifecycle timing and input binding. Strong answer: ngOnInit runs once after inputs are initialized, but the constructor instantiates the class before bindings exist.
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.
Get Components bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.