MEAN Stack Interview Questions in Ahmedabad

Show answer

Expose read-only state and mutation methods. @Injectable({ providedIn: 'root' }) export class CartService { private items = signal<CartItem[]>([]); readonly cart = this.items.asReadonly(); readonly count = computed(() => this.items().reduce((n, i) => n + i.qty, 0)); readonly total = computed(() => this.items().reduce((s, i) => s + i.qty * i.price, 0)); add(product: Product) { this.items.update((list) => { const found = list.find((i) => i.id === product.id); return found ? list.map((i) => (i.id === product.id ? { ...i, qty: i.qty + 1 } : i)) : [...list, { ...product, qty: 1 }]; }); } remove(id: string) { this.items.update((l) => l.filter((i) => i.id !== id)); } }

What are async validators and when do you use them?

Show answer

Async validators return an Observable or Promise of validation errors, used when validity needs a server check, such as whether a username or email is already taken. Angular runs them only after synchronous validators pass, and the control's status is PENDING meanwhile. Use updateOn: 'blur' or debounce inside the validator to avoid a request on every keystroke, and still enforce uniqueness on the backend.

Users double-click the Pay button and two payment requests are sent. How would you prevent it on the frontend?

Show answer

Disable the button while the request is pending, using an isSubmitting signal. In RxJS, model clicks as a stream and use exhaustMap, which ignores new clicks until the current payment request completes. Show a loading state and handle errors so the button re-enables. The backend must still use idempotency keys, because frontend protection alone cannot stop network retries or duplicate tabs.

What query and comparison operators do you use most in MongoDB?

MongoDB Data Modelling and QueriesEasy

Show answer

Comparison operators include $eq, $ne, $gt, $gte, $lt, $lte, $in and $nin, for example { price: { $gte: 500, $lte: 2000 } }. Logical operators are $and, $or, $not and $nor. Element operators $exists and $type check fields, $regex matches patterns, and array operators $all, $size and $elemMatch query inside arrays. Projections choose returned fields, and sort, skip and limit shape the result.

An Express endpoint generates a large PDF report and the whole API slows down while it runs. How do you fix it?

Node.js and Express APIsMedium

Show answer

PDF generation is CPU-heavy and blocks the event loop. Move it to a background job: the endpoint creates a job in a queue such as BullMQ with Redis and immediately returns 202 Accepted with a job id. A separate worker generates the PDF, uploads it to storage and updates the job status. Angular polls the status or receives a websocket notification, then downloads the file.

Load three APIs in parallel with forkJoin and handle a failure in one of them.

Show answer

Each request gets its own fallback. import { forkJoin, of, catchError } from 'rxjs'; loadDashboard() { return forkJoin({ sales: this.api.getSales().pipe(catchError(() => of(null))), orders: this.api.getRecentOrders().pipe(catchError(() => of([]))), users: this.api.getUserStats().pipe(catchError(() => of(null))) }); } dashboard = toSignal(this.loadDashboard()); // template: @if (dashboard(); as d) { ... d.sales ... } forkJoin emits once, after every inner Observable completes.

Users upload large documents and want to see upload progress. How do you implement it in Angular?

Show answer

Send a FormData body with HttpClient post and options reportProgress: true and observe: 'events'. Filter the event stream for HttpEventType.UploadProgress to calculate percent from loaded and total, and for HttpEventType.Response to get the final result. Show a progress bar bound to a signal, allow cancelling by unsubscribing, and validate size and type before upload. For very large files, upload directly to storage with pre-signed URLs.

How do you serve an Angular build and an Express API from the same Node server?

Node.js and Express APIsMedium

Show answer

Build Angular with ng build, which outputs static files to dist/project/browser. In Express, register API routes under /api first, then serve the static files with express.static, and finally add a catch-all GET route that returns index.html so Angular routing works on refresh. In larger deployments, Nginx or a CDN usually serves the Angular files while Express handles only the API.

How does $lookup work in an aggregation pipeline?

Show answer

$lookup performs a left outer join with another collection in the same database. The basic form matches localField to foreignField and writes matching documents into an array field. The pipeline form lets you add conditions, filtering and projections on the joined collection using let variables. Often you follow it with $unwind to flatten the array. Index the foreign field so the join stays efficient.

Write a custom type guard to check whether an API response is an error.

TypeScript and Modern JavaScriptMedium

Show answer

A type predicate narrows the union. type ApiError = { error: true; message: string }; type ApiSuccess<T> = { error: false; data: T }; type ApiResult<T> = ApiError | ApiSuccess<T>; function isApiError<T>(res: ApiResult<T>): res is ApiError { return res.error === true; } if (isApiError(result)) { console.error(result.message); } else { render(result.data); } Inside each branch TypeScript knows exactly which fields exist.

How do you avoid memory leaks from subscriptions in Angular?

Show answer

Prefer the async pipe in templates or toSignal, which subscribe and unsubscribe automatically. For manual subscriptions, use takeUntilDestroyed() from the rxjs-interop package, which completes the stream when the component's DestroyRef fires. HttpClient requests complete on their own, but long-lived streams like intervals, store selectors, router events and websockets must be cleaned up. Avoid nested subscribe calls; use flattening operators instead.

Tell me about a data modelling decision you made and how it worked out.

Show answer

Situation: in a learning portal, I first embedded all quiz attempts inside each user document. Task: attempts grew quickly and user loads became slow. Action: I moved attempts to their own collection with an index on userId and quizId, kept a small summary of best scores on the user, and wrote a migration script. Result: profile pages became much faster and reporting queries became simpler.

What are Angular's lifecycle hooks and when is each typically used?

Angular Components and TemplatesMedium

Show answer

ngOnChanges runs when input values change. ngOnInit runs once after the first inputs are set, used for initial data loading. ngDoCheck allows custom change detection. ngAfterContentInit and ngAfterViewInit run after projected content and the view are ready, used for DOM access. ngOnDestroy runs before removal, used for cleanup. With signals, effect, computed and DestroyRef often replace several of these hooks.

What testing tools are used in Angular projects today?

Show answer

Angular's CLI has moved to Vitest as the default unit test runner for new projects, replacing the deprecated Karma, while many existing projects still run Karma with Jasmine or have switched to Jest. TestBed configures components and services for tests, HttpTestingController mocks HTTP calls, and component harnesses from the CDK simplify interaction tests. Playwright or Cypress handle end-to-end tests.

How do parent and child components communicate in Angular?

Show answer

A parent passes data down through inputs, declared with the input() function or the @Input decorator, and the child notifies the parent through outputs, declared with output() or @Output with an EventEmitter. For two-way binding, model() creates a writable input. A parent can access a child directly using viewChild. For unrelated components, use a shared service holding a signal or a BehaviorSubject.

What is a route resolver and when would you use one?

Services, Dependency Injection and RoutingMedium

Show answer

A resolver fetches data before a route activates, so the component receives ready data instead of showing an empty state first. A functional resolver, ResolveFn<Product>, uses inject() to call a service and returns an Observable or Promise. The data is available through ActivatedRoute or bound inputs. Use it for detail pages that are useless without data, but avoid it for slow calls, because navigation waits.

Write a standalone Angular component that displays a list of products using @for.

Show answer

Signals and built-in control flow keep it concise. import { Component, signal } from '@angular/core'; import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-product-list', imports: [CurrencyPipe], template: ` @for (p of products(); track p.id) { <div class='card'>{{ p.name }} - {{ p.price | currency:'INR' }}</div> } @empty { <p>No products found</p> } ` }) export class ProductListComponent { products = signal([{ id: 1, name: 'Laptop', price: 55000 }]); }

Tell me about a complex form you built and the challenges you solved.

Show answer

Situation: I built a loan application form with five steps and over sixty fields. Task: make it reliable and user friendly. Action: I used typed reactive forms split into step groups, cross-field validators for income rules, a FormArray for co-applicants, auto-saved drafts every thirty seconds and mapped server validation errors back to fields. Result: drop-offs reduced noticeably and QA found very few form bugs.

OTP codes must automatically expire ten minutes after creation. How would you implement this with MongoDB?

MongoDB Data Modelling and QueriesEasy

Show answer

Store each OTP in its own collection with a createdAt date field and create a TTL index, db.otps.createIndex({ createdAt: 1 }, { expireAfterSeconds: 600 }). MongoDB's background task removes expired documents automatically, though deletion can lag by about a minute, so also check the timestamp during verification. Store a hash of the code rather than plain text, and limit verification attempts.

What are @defer blocks and how do they help performance?

Angular Components and TemplatesMedium

Show answer

@defer lets you lazy load part of a template and its dependencies only when a trigger occurs, such as on viewport, on interaction, on hover, on idle, on timer or a custom condition with when. Angular automatically splits that code into a separate chunk. You can show @placeholder, @loading and @error blocks. It is ideal for heavy below-the-fold widgets like charts, comments and maps.

You see ExpressionChangedAfterItHasBeenCheckedError in development. What does it mean and how do you fix it?

Angular Components and TemplatesHard

Show answer

In development Angular runs an extra check to make sure a binding did not change after it was already checked in the same cycle. The error usually appears when a child or a lifecycle hook like ngAfterViewInit changes parent data during rendering. Fix it by moving the update earlier, such as into ngOnInit, deriving the value with a computed signal, or restructuring data flow, rather than hiding it with setTimeout.

You are building an e-commerce product catalogue where each category has different attributes, such as size for clothes and RAM for laptops. How would you model it in MongoDB?

Show answer

Store common fields like name, price, category and stock at the top level, and keep variable specifications in an attributes array of { key, value } pairs, the attribute pattern. Create a compound index on attributes.key and attributes.value so filters work on any attribute. This avoids dozens of sparse fields and lets new categories be added without schema changes, while Mongoose validates the common fields.

Explain the difference between switchMap, mergeMap, concatMap and exhaustMap.

RxJS, Signals and State ManagementHard

Show answer

All map each source value to an inner Observable but differ in concurrency. switchMap cancels the previous inner Observable, ideal for search. mergeMap runs all inner Observables in parallel, good for independent uploads. concatMap queues them and runs one at a time in order, good for sequential saves. exhaustMap ignores new values while one is active, ideal for preventing duplicate login or submit clicks.

How do you handle disagreements with a UI designer about how a form should behave?

Angular Forms and HTTP ClientEasy

Show answer

Situation: a designer wanted validation errors only after submit, but users were missing errors on long forms. Task: reach an agreement quickly. Action: I shared quick screen recordings comparing both approaches and pointed to accessibility guidelines, then proposed validation on blur with a summary at the top on submit. Result: the designer agreed, we tested it with users and the pattern became part of our design system.

List the Angular CLI commands you use most often in a project.

Show answer

Common commands: ng new shop-app --style=scss ng serve --open ng generate component features/product-list ng generate service core/auth ng generate guard core/auth --functional ng generate pipe shared/truncate ng build --configuration production ng test ng update @angular/core @angular/cli ng update applies official migrations automatically, which makes version upgrades much easier.

Write a multi-stage Dockerfile that builds Angular and serves it with Nginx.

Show answer

Build in Node, ship only static files. FROM node:22-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npx ng build --configuration production FROM nginx:alpine COPY nginx.conf /etc/nginx/conf.d/default.conf COPY --from=build /app/dist/shop/browser /usr/share/nginx/html EXPOSE 80 The final image contains no Node.js or source code. nginx.conf should include try_files $uri /index.html for Angular routes.

Test an Angular service's HTTP call with HttpTestingController.

Show answer

Capture and flush the request. describe('ProductService', () => { let service: ProductService; let httpMock: HttpTestingController; beforeEach(() => { TestBed.configureTestingModule({ providers: [provideHttpClient(), provideHttpClientTesting()] }); service = TestBed.inject(ProductService); httpMock = TestBed.inject(HttpTestingController); }); it('fetches products', () => { service.getAll().subscribe((p) => expect(p.length).toBe(1)); const req = httpMock.expectOne('/api/products'); expect(req.request.method).toBe('GET'); req.flush([{ _id: '1', name: 'Pen' }]); httpMock.verify(); }); });

Write an Nginx server block that serves Angular and proxies /api to Node.

Show answer

One domain, no CORS needed. server { listen 80; server_name shop.example.com; root /usr/share/nginx/html; location /api/ { proxy_pass http://api:3000; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { try_files $uri $uri/ /index.html; } location ~* \.(js|css|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; } } Angular hashed file names make long caching safe.

What is an Angular component and what are its main parts?

Show answer

A component controls a piece of the screen. It is a TypeScript class decorated with @Component, which provides a selector used as an HTML tag, a template or templateUrl for the view, styles or styleUrl for scoped CSS, and imports for other standalone components, directives and pipes it uses. The class holds data and event handlers, and the template binds to them.

Your app must call different API base URLs for development, staging and production. How do you configure this in Angular?

Services, Dependency Injection and RoutingMedium

Show answer

Use environment files such as environment.ts and environment.prod.ts with fileReplacements in angular.json build configurations, or load a config.json at startup with provideAppInitializer so one build works in every environment. Expose the URL through an InjectionToken and inject it in services or an interceptor. Never put secrets in these files, because everything in the Angular bundle is public.

Create a child component with a signal input and an output that emits when a button is clicked.

Angular Components and TemplatesMedium

Show answer

The parent passes data in and listens for events. import { Component, input, output } from '@angular/core'; @Component({ selector: 'app-todo-item', template: ` <span>{{ title() }}</span> <button (click)='remove.emit(id())'>Delete</button> ` }) export class TodoItemComponent { id = input.required<number>(); title = input(''); remove = output<number>(); } // parent template // <app-todo-item [id]='t.id' [title]='t.title' (remove)='onRemove($event)' />

Write mongosh commands to inspect a slow query and the indexes on a collection.

Show answer

Useful diagnostic commands: db.orders.getIndexes() db.orders.find({ status: 'pending', city: 'Pune' }) .sort({ createdAt: -1 }) .explain('executionStats') db.setProfilingLevel(1, { slowms: 100 }) db.system.profile.find().sort({ ts: -1 }).limit(5) db.orders.createIndex({ status: 1, city: 1, createdAt: -1 }) Compare totalDocsExamined with nReturned before and after creating the index.

What is the new built-in control flow syntax in Angular templates?

Show answer

Modern Angular uses blocks instead of structural directives: @if with @else if and @else for conditions, @for with a required track expression and an optional @empty block for lists, and @switch with @case and @default. The syntax is built into the compiler, needs no imports, is easier to read and is faster than *ngIf and *ngFor. The CLI provides a migration schematic for older templates.

What are discriminated unions and why are they useful?

TypeScript and Modern JavaScriptHard

Show answer

A discriminated union is a union of object types that share a literal property, the tag, such as type Result = { status: 'ok'; data: User } | { status: 'error'; message: string }. Checking result.status narrows the type, so TypeScript knows which fields exist in each branch. Combined with a never check in the default case, the compiler warns you when a new variant is added but not handled.

An order form lets users add any number of items with product, quantity and price. How do you build it?