Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
Create a template link to a route without a full page reload
Tests SPA client-side routing knowledge. Strong answer: name RouterLink or routerLink, explain click interception and History API URL updates, and contrast with plain anchor tags.
How do you define a basic Vue or Angular route?
Tests SPA routing conventions. Angular: Routes array in app.routes.ts with path and component, provided in bootstrap. Vue: routes array in src/router/index.js passed to createRouter. Red flag: omitting the outlet or placing config in a component.
Key differences between Template-Driven and Reactive Forms in Angular
This tests Angular form architecture tradeoffs. Contrast explicit synchronous reactive models with implicit asynchronous template-driven ones; assign reactive to scalable dynamic forms and template-driven to simple inputs.
How does Vue v-model work syntactically under the hood?
Tests if you know v-model is syntax sugar over prop and event pairs. Strong answers map text to :value/@input, checkboxes to :checked/@change, selects to value/@change, and note JS state wins. Red flag: calling it magic or true two-way binding.
How do you bypass Svelte's scoped styles to target global elements?
Tests Svelte style encapsulation escape hatches. Strong answer: :global() syntax for elements and classes, plus risks like leaky side effects and specificity wars. Red flag: external stylesheets or inline styles as the primary solution.
How does Vue's v-bind() CSS function work in style blocks?
Tests Vue SFC CSS transforms and browser primitives. Strong answer: Vue compiles v-bind() to scoped CSS custom properties, letting reactive values work with pseudo-selectors and media queries.
How do _ngcontent and _nghost attributes enforce Angular style isolation?
Unique component ID, _nghost on host, _ngcontent on template nodes, and CSS rewritten with attribute selectors to scope styles. Angular's emulated encapsulation mechanics.
How do CSS Modules differ from Vue scoped CSS?
This question tests build-time versus compiler style isolation. CSS Modules export a hashed class mapping object; Vue scoped CSS adds unique data-attributes. You bind templates via $style.myClass or an imported object. Red flag: claiming both use attributes.
How does Svelte scope component styles during compilation?
The compiler adds a unique attribute to component elements and rewrites selectors to target it, isolating styles. Knowledge of Svelte's compile-time CSS encapsulation. Claiming scoping uses runtime JS or shadow DOM.
What attribute scopes styles to a Vue component?
This tests knowledge of Vue's style encapsulation. Add the scoped attribute to the style tag; Vue adds a unique data attribute to elements and selectors. A red flag is suggesting manual BEM or claiming scoped styles never affect child components.
How do Svelte Stores work and how do you create custom ones?
Tests Svelte store contract mastery. A strong answer defines the subscribe/unsubscribe interface, wraps writable() with custom set/update logic, subscribes via $ prefix or manually, and uses $store in templates.
Fundamental difference between Vue computed and watcher with examples
Tests derived state vs side effects in Vue reactivity. Computed returns cached derived value; watch executes callback on mutation. Example: computed filters list; watch fetches data when ID changes. Red flag: watch for template state or computed for async.
How do you update Svelte arrays and objects to trigger reactivity?
This tests knowledge of Svelte 5 deep reactivity: $state wraps arrays in proxies so push and property mutations trigger updates. Mention $state first, then note legacy syntax needs reassignment. A red flag is claiming push never works in Svelte.
How would you create a custom *appDelay structural directive?
This tests Angular rendering internals. A strong answer covers: TemplateRef as the embedded template, ViewContainerRef as insertion anchor, and a setter that creates the embedded view after a delay. Mention OnDestroy cleanup.
In Vue 3, what problem does Teleport solve?
This tests DOM hierarchy and CSS stacking context. A strong answer covers how Teleport moves markup to a target like body to escape ancestor transforms and z-index ceilings trapping fixed modals. Red flag: claiming it is only for cleaner HTML.
Explain key or trackBy in list rendering and index key risks
Your understanding of virtual DOM reconciliation and stable element identity. A good answer covers that key binds DOM state to data identity, and that index keys break reordering by recycling wrong components.
How do you conditionally render Login/Logout with isLoggedIn in Vue or Angular?
This tests DOM lifecycle awareness versus CSS toggling. A strong answer uses v-if/*ngIf for infrequent changes that need cleanup, and v-show/[hidden] for frequent toggles that should stay mounted. A red flag is treating them as interchangeable.
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.
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.
Design the public API for a reusable Button component
Variant, size, disabled, type props; forward click; slots for content/icons; no router/form coupling. Minimal stateless API design favoring composition. route props, onSubmit handlers, class/style escape hatches.
How do you configure Vite Library Mode for ESM and UMD outputs?
Tests Vite Library Mode multi-format packaging. Strong answer: build.lib entry, formats es and umd, fileName function, and rollupOptions.output.globals for Vue. Red flag: multiple configs or omitting UMD global name.
How does src/routes determine routing in SvelteKit?
Src/routes mirrors URLs, folders become paths, [slug] creates dynamic params, and +page.svelte renders pages. Filesystem routing and plus-prefix naming. Saying routes live in a central config file, not the filesystem.
ng serve purpose and fundamental difference from ng build
Ng serve compiles in memory and serves via a dev server with live reload, while ng build writes output to dist/. Understanding in-memory dev serving versus disk builds. Believing ng serve writes files to disk.
How does Svelte update the DOM without a Virtual DOM?
This tests compile-time versus runtime framework architecture. A strong answer says Svelte compiles components into imperative JS that surgically updates the DOM when reactive state changes. A red flag is claiming it uses a hidden VDOM or dirty checking.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.