Angular
122 bites tagged Angular — interview questions with model answers, and 60-second explainers.
What is the purpose of an Angular Resolve guard vs ngOnInit?
Tests routing lifecycle timing and UX state management. Strong answers: Resolve blocks activation until data returns; ngOnInit renders first then fetches, causing flicker.
What are nested routes and why are they useful?
Nested routes render children inside a parent's router-view, preserving shared layouts while URL segments swap nested content. hierarchical UI-to-URL mapping. flat routes with duplicated parent wrappers in every child.
Explain navigation guards and provide an auth use case
Guards are global, per-route, or in-component hooks; returning false cancels, a route object redirects; use auth on /dashboard. Grasp of routing lifecycle interception. Calling them listeners without mentioning returns.
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.
Implement an async Angular validator with HTTP and PENDING feedback
Tests Angular async validator lifecycle and HTTP race conditions. A strong candidate returns an Observable from AsyncValidatorFn, lets Angular set PENDING automatically, debounces input, and binds control.pending in the template.
How do you debounce input for API validation in Vue or Angular?
Tests reactive stream control and cancellation. A strong answer uses debounceTime at 300ms, switches with switchMap, and handles loading and error states. Red flag: using setTimeout without cleanup or ignoring race conditions.
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 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.
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.
Explain Angular default change detection, zone.js, and OnPush
Deep knowledge of Angular's automatic vs explicit change detection. Explain zone.js monkey-patching async APIs to trigger default checks; contrast with OnPush requiring immutable inputs, async pipe, or markForCheck.
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.
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.
How does Angular OnPush change detection affect rendering?
This tests change detection tree knowledge. OnPush skips checks unless inputs change by reference, events fire, or async pipes mark for check. Mutated objects or manual subscriptions without markForCheck cause silent misses.
What's the difference between Angular property and attribute binding?
Tests whether you know Angular binds to DOM properties by default. [disabled] sets a DOM property; [attr.role] sets an HTML attribute. Use attribute binding when no DOM property exists, such as SVG attributes or role. Red flag: claiming they are equivalent.
Why does todos.push miss Svelte updates but spread works?
Tests compile-time versus runtime reactivity. Answer: Svelte's compiler instruments assignments, not method calls, so push is invisible; Vue Proxies and Angular Zone.js both intercept push to trigger updates.
How do you pass markup from a parent to a child component?
This tests declarative composition for UI reuse. A strong answer covers default and named slot syntax in Vue/Svelte (slot outlet, v-slot) or Angular ng-content with select for named projection.
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.
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 Vue and Angular detect nested object mutations?
Tests deep reactivity vs reference-based detection. Vue 3 Proxies catch nested mutations; Angular Default checks on zone ticks and OnPush misses same-reference changes. Fix via immutability, deep watchers, or ngDoCheck.
Get Angular bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.