Easy everything in Frontend Dev, page 3
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.
Fetch data on first render and manage loading and error states
Tests lifecycle awareness and separation of concerns. Strong answer: use mount hook (onMounted, ngOnInit, onMount), hold reactive data/loading/error states, and render conditional UI branches. Red flag: calling fetch directly in template or render function.
Share state between sibling components without a state library
Tests if you over-engineer simple sibling state. Good answers lift state to the common parent, passing data down via props and changes up via events; or use built-in primitives like Svelte stores or an Angular shared service.
What is prop drilling and when is it a problem?
Define it as passing data through components that ignore it; move to global state when unrelated branches need same data.
Bind an input to a variable and validate with reactivity
Tests Svelte reactivity: connecting DOM state to validation logic. Good answer: $state for the variable, $effect to run validation when it changes, cleanup if needed. Red flag: using effects where event handlers suffice or creating infinite loops.
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 does Svelte scope component styles during compilation?
The compiler adds a unique attribute to component elements and rewrites selectors to target it, isolating styles.
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 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 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.
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.
Vue 3 ref() vs reactive(): differences and when to use each
Tests Vue 3 Composition API reactivity primitives. Strong answer: ref() wraps any value in a .value wrapper and is the recommended default; reactive() returns a proxy accessed directly. Red flag: saying ref() is only for primitives or omitting .value entirely.
Explain two-way data binding and provide input binding syntax
Tests whether you see two-way binding as sugar for value binding plus an input event. Strong answer: show one syntax, then explain the prop-out, event-in pattern. Red flag: syntax only with no mention of change detection or unidirectional flow.
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.
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.
Design the public API for a reusable Button component
Variant, size, disabled, type props; forward click; slots for content/icons; no router/form coupling.
How does src/routes determine routing in SvelteKit?
Src/routes mirrors URLs, folders become paths, [slug] creates dynamic params, and +page.svelte renders pages.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles