Angular and React Front End Interview Questions for .NET Full Stack
25 Angular and React Front End questions with answers for .net full stack roles — 9 easy, 13 medium, 3 hard.
About Angular and React Front End
The front-end half of a .NET full stack role: Angular components, signals, services, RxJS, forms, routing guards and interceptors, plus React hooks, props, state and data fetching. Questions also cover calling ASP.NET Core APIs securely, handling CORS and tokens, performance with large lists, and deploying the single-page app with the API.
Sheet progressStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
✓ 3 questions free • Unlock the rest in seconds
01
Angular or React with ASP.NET Core: how do you choose?
Angular is a complete framework with routing, forms, HTTP, dependency injection and TypeScript built in, which suits large enterprise apps and teams that want strong conventions. React is a UI library with a large ecosystem, giving more freedom to pick routing and state tools, and is popular in product startups. Both work equally well with an ASP.NET Core API. Choose based on team skills, project size and the company's existing stack.
02
What are components and standalone components in Angular?
A component is a TypeScript class with the @Component decorator, a template and styles, representing one piece of UI such as a product card. Earlier, every component had to be declared in an NgModule. Standalone components import their own dependencies directly through the imports array and need no module; since Angular 19 they are the default. This simplifies apps, enables easier lazy loading and is the recommended approach in 2026.
Interpolation {{ value }} shows component data in the template. Property binding [src]="imageUrl" sets an element or child property. Event binding (click)="save()" calls a component method on a DOM event. Two-way binding [(ngModel)]="name" combines property and event binding so the input and the field stay in sync. The first two flow from component to view, event binding flows from view to component.
04
Show the useState and useEffect hooks in a React component.
import { useState, useEffect } from 'react';
export function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const id = setInterval(() => setSeconds(s => s + 1), 1000);
return () => clearInterval(id); // cleanup on unmount
}, []); // empty array: run once
return <p>Elapsed: {seconds}s</p>;
}
useState stores state that triggers re-render; useEffect runs side effects after render, and its dependency array controls when it re-runs.
The virtual DOM is a lightweight JavaScript copy of the UI tree. When state changes, React renders a new virtual tree, compares it with the previous one in a process called reconciliation, and applies only the minimal changes to the real DOM, which is slow to update. Keys on list items help React match elements correctly. This lets developers write UI declaratively without manually updating DOM nodes.
06
What is the difference between props and state in React?
Props are inputs passed from a parent component to a child, like function arguments, and the child must not modify them. State is data owned and managed inside a component with useState or useReducer, and changing it re-renders the component. For example, a ProductCard receives product details as props, while a Cart component keeps the quantity in state. Shared state is lifted up to a common parent or moved into a store.
07
Your Angular app on localhost:4200 gets a CORS error when calling the ASP.NET Core API on localhost:5001. How do you fix it?
The browser blocks the call because the origins differ and the API sends no CORS headers. In the API, register a policy with AddCors allowing http://localhost:4200, the needed methods and headers, and call app.UseCors before UseAuthorization. Alternatively, use the Angular dev server proxy (proxy.conf.json) to forward /api calls, so the browser sees the same origin. In production, configure the real front-end domain, not AllowAnyOrigin.
I built an online bus-pass system (Situation) as my final project with two classmates. My task was the API and database. I designed SQL Server tables, built an ASP.NET Core Web API with EF Core and JWT login, and connected an Angular front end with reactive forms and route guards. I deployed it on Azure App Service. Result: it handled pass applications, approvals and PDF passes, and our college used it for a semester demo.
09
Why should we hire you as a .NET full stack developer?
I can contribute on both sides of a feature: I have built ASP.NET Core APIs with EF Core and SQL Server, and front ends in Angular and React, and deployed them myself. I write clean, tested code and I am comfortable reading logs and execution plans when things break. I learn quickly, ask questions early and take ownership, so you can give me a module and trust that it will be completed properly.
10
What are services and dependency injection in Angular?
A service is a class, marked @Injectable, that holds logic or data shared across components, such as API calls, authentication or a cart. Angular's DI creates the service and provides it to components that request it in the constructor or with the inject() function. With providedIn: 'root', one shared instance exists for the whole app. This keeps components focused on UI and makes logic easy to test.
11
What are signals in Angular and why were they introduced?
Signals are reactive values: count = signal(0) holds state, computed() derives values and effect() runs side effects when dependencies change. Angular knows exactly which parts of the view read which signal, so it updates only those parts instead of checking the whole component tree. This enables zoneless change detection, which became the default for new apps in Angular 21, and gives simpler state handling than RxJS for local UI state.
12
What is the difference between an RxJS Observable and a Promise?
A Promise represents a single future value, starts immediately and cannot be cancelled. An Observable can emit many values over time, is lazy until subscribed, and can be cancelled by unsubscribing. RxJS operators like map, debounceTime, switchMap and retry make it powerful for streams such as search boxes or WebSocket data. Angular's HttpClient returns Observables; use the async pipe or toSignal to avoid manual unsubscribe.
13
Write an Angular HTTP interceptor that adds a JWT to every API request.
Template-driven forms are defined mainly in HTML with ngModel and directives; they are quick for simple forms but harder to test. Reactive forms are defined in TypeScript with FormGroup, FormControl and Validators, giving explicit, strongly typed models, easy dynamic fields, custom and async validators, and straightforward unit testing. For enterprise apps such as loan application or KYC forms, reactive forms are the usual choice.
16
Fetch products from an ASP.NET Core API in React with loading and error states.
useMemo caches the result of an expensive calculation and recalculates only when its dependencies change, such as filtering 10,000 rows. useCallback caches a function reference so that a child wrapped in React.memo does not re-render just because a new function was created. Both are optimisations and add complexity, so use them where profiling shows a problem. The React Compiler, stable since late 2025, can apply much of this memoisation automatically.
18
How do you manage application state in Angular and React apps?
Start simple: local component state, then share through a parent or a service. In Angular, a service holding signals covers most needs, and NgRx or NgRx SignalStore suits large apps with complex flows. In React, Context works for low-frequency data like theme or user, Redux Toolkit or Zustand for complex client state, and TanStack Query for server data with caching. Keep server data and UI state separate.
19
Your Angular app's first load is slow on mobile because the main bundle is very large. How does lazy loading of routes help?
Lazy loading splits the app into chunks that download only when the user navigates to that route, so the initial bundle is smaller and the first page loads faster, especially on mobile data. In Angular use loadComponent or loadChildren with a dynamic import in the route config; in React use React.lazy with Suspense or the router's lazy option. Angular's @defer blocks can also delay heavy parts of a page.
20
An admin page renders 20,000 rows in a table and the browser freezes. How do you fix it?
Do not send or render everything at once. Add server-side paging, sorting and filtering in the ASP.NET Core API so the page loads perhaps 50 rows at a time. If users truly need to scroll a long list, use virtual scrolling, such as Angular CDK virtual scroll or TanStack Virtual in React, so only visible rows exist in the DOM. Also use trackBy or keys, and debounce search inputs.
21
How would you deploy an Angular or React front end together with an ASP.NET Core API?
Two common options exist. Build the SPA with ng build or npm run build and serve the static files from the API's wwwroot with UseStaticFiles and MapFallbackToFile, giving one deployment and no CORS. Or host the SPA separately on a CDN or static hosting such as Azure Static Web Apps and the API on App Service or containers, which scales independently. Use environment config for API URLs and a CI/CD pipeline for both.
22
How do you handle requirements that keep changing during a sprint?
In one sprint (Situation) the product owner changed a checkout screen twice. My task was to deliver without losing quality. I asked for a quick meeting to understand the reason, split the work into a stable API part and a flexible UI part, and agreed with the team which change would move to the next sprint. Result: we shipped the core flow on time, and the team started confirming acceptance criteria before sprint planning.
23
Your security team objects to storing the JWT in localStorage in your Angular app. What are the options?
localStorage is readable by any JavaScript on the page, so an XSS bug can steal the token. A safer pattern is to keep the short-lived access token in memory and store the refresh token in an HttpOnly, Secure, SameSite cookie that scripts cannot read. Even better is the backend-for-frontend pattern, where ASP.NET Core holds tokens server-side and the browser uses a session cookie. Add CSRF protection when using cookies.
24
A large Angular dashboard becomes sluggish because change detection runs constantly. How do OnPush and zoneless mode help?
Traditionally Zone.js patched browser events and timers, and after each one Angular checked every component for changes, top to bottom. OnPush makes a component re-check only when its inputs change by reference, an event occurs inside it, an async pipe emits or a signal it reads changes, which saves work in big screens. Zoneless mode removes Zone.js entirely and relies on signals and explicit triggers, reducing bundle size and improving performance.
25
Tell me about a time you led a team to deliver a complex feature.
As tech lead (Situation) I owned a vendor-payments module touching Angular, three APIs and SQL Server. My task was to deliver it in six weeks with four developers. I broke it into vertical slices, defined API contracts first, set up feature flags and reviewed every pull request within a day. When one developer struggled with EF Core, I paired with them. Result: we released on time with no critical bugs and two juniors grew into module owners.
Frequently asked questions
How important is Angular and React Front End in .NET Full Stack interviews?
The front-end half of a .NET full stack role: Angular components, signals, services, RxJS, forms, routing guards and interceptors, plus React hooks, props, state and data fetching. Questions also cover calling ASP.NET Core APIs securely, handling CORS and tokens, performance with large lists, and deploying the single-page app with the API.
How should I use the Angular and React Front End sheet?
Go top to bottom — easy to hard. Answer before opening each answer, tick what you solved and save misses to Last-Minute Revision.