Components
78 bites tagged Components: interview questions with model answers, and 60-second explainers.
Test yourself: Top 30 Components interview questions →Multiple choice, with the correct answer and why it is correct on every question. Free, no sign-in.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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Documentation for a new Card component
Usage guidance and do/don't, variants, accessibility, code examples, composition.
Documenting accessibility per component
Per-component a11y sections, keyboard tables, ARIA roles and states, live examples.
Rolling out a breaking change to a shared Button
Major semver bump, deprecation period, codemod and migration guide, staged comms.
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.
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.
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.
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.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.