MEAN Stack Developer Interview Questions &amp; Answers

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.

Why is Node.js a good fit for the backend in a MEAN application?

Show answer

Node.js runs JavaScript or TypeScript on the server with a non-blocking, event-driven model, so it handles many concurrent I/O-heavy requests efficiently. The team uses one language family across Angular and the API, can share TypeScript models, and has access to the large npm ecosystem. It is ideal for REST APIs, real-time features and microservices, but CPU-heavy tasks should move to workers or separate services.

Write a custom pure pipe that shortens long text with an ellipsis.

Show answer

Pipes are standalone by default. import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'truncate' }) export class TruncatePipe implements PipeTransform { transform(value: string | null, limit = 50): string { if (!value) return ''; return value.length > limit ? value.slice(0, limit).trimEnd() + '...' : value; } } // add TruncatePipe to the component's imports, then: // {{ product.description | truncate:80 }} Because it is pure, it reruns only when the input string or limit changes.

Users complain that the app shows a blank screen whenever the backend is down. How do you improve this?

Show answer

Add a global error interceptor that maps network and 5xx errors to a friendly toast or banner, with retry for transient failures. In each data component, handle loading, error and empty states explicitly, using httpResource status signals or catchError with fallback values. Show a retry button, keep cached data visible if available, and log errors to monitoring. A health check banner helps during outages.

What is Angular and how is it different from a library like React?

Show answer

Angular is a complete, opinionated front-end framework maintained by Google for building single-page applications in TypeScript. It includes routing, forms, an HTTP client, dependency injection, testing tools and a CLI out of the box, so teams follow a consistent structure. React is a UI library and relies on third-party choices for routing and state. Angular's structure suits large enterprise teams and long-lived projects.

Write a functional HTTP interceptor that adds a JWT and handles 401 errors.

Show answer

Register with provideHttpClient(withInterceptors([authInterceptor])). export const authInterceptor: HttpInterceptorFn = (req, next) => { const auth = inject(AuthService); const router = inject(Router); const token = auth.token(); const authReq = token ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req; return next(authReq).pipe( catchError((err: HttpErrorResponse) => { if (err.status === 401) { auth.logout(); router.navigate(['/login']); } return throwError(() => err); }) ); };

What are typed reactive forms?

Show answer

Since Angular 14, reactive forms are strongly typed. A FormControl<string> knows its value type, so form.value and getRawValue return typed objects and the compiler catches wrong field names. Controls are nullable by default because reset sets them to null; using nonNullable: true or NonNullableFormBuilder resets to the initial value instead. Typed forms make it safe to map form values directly to API request interfaces.

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.

A product list with 2,000 rows re-renders slowly whenever any data changes. How do you optimise it?

Angular Components and TemplatesMedium

Show answer

Use @for with a proper track expression, such as track product._id, so Angular reuses DOM nodes instead of recreating them. Switch the component to OnPush and update data immutably or with signals. Replace function calls in templates with computed signals or pure pipes. For very long lists, use virtual scrolling from the Angular CDK and paginate on the server.

What is middleware in Express, and what kinds of middleware are there?

Show answer

Middleware is a function with access to req, res and next that runs in order for matching requests. Kinds include application-level middleware registered with app.use, router-level middleware on an express.Router, built-in middleware like express.json and express.static, third-party middleware such as cors, helmet and morgan, and error-handling middleware with four arguments. Middleware can end the response or pass control with next().

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

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.

How do you explain database trade-offs, such as choosing MongoDB over SQL, to a client?

Show answer

Situation: a client asked why we proposed MongoDB instead of the SQL database they knew. Task: explain clearly without jargon. Action: I mapped their product catalogue with varying attributes to documents, showed how it reduced joins and schema changes, admitted where SQL would be better, like complex financial reports, and proposed a reporting export. Result: the client approved MongoDB with confidence in the plan.

How does JWT-based authentication work end to end in a MEAN application?

Security, Testing and DeploymentEasy

Show answer

The user submits credentials from an Angular form to an Express login route. The server verifies the bcrypt password hash and signs a short-lived access token containing the user id and role, often with a refresh token in an httpOnly cookie. Angular stores the access token in memory, an interceptor attaches it to requests, Express middleware verifies it, and guards control which routes the user can open.

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.

What are HTTP interceptors and what are common use cases?

Show answer

Interceptors sit between HttpClient and the server and can modify every request and response. Modern Angular uses functional interceptors of type HttpInterceptorFn registered through withInterceptors. Common uses are attaching an Authorization header, adding a base URL, showing a global loading indicator, logging, retrying failed requests, refreshing expired tokens and mapping errors to user-friendly messages. Interceptors run in the order they are listed.

Users can search products by name, and a regex query has become very slow. What would you do?

Show answer

A regex without an anchored prefix cannot use a normal index efficiently and scans the collection. For simple word search, create a text index and use $text with a relevance score. For a better search experience with typo tolerance, autocomplete and facets, use Atlas Search or a dedicated search engine. Paginate results, limit fields with projection and debounce requests from the Angular search box.

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 is the difference between template-driven and reactive forms in Angular?

Show answer

Template-driven forms build the form model from directives in the template, mainly ngModel, and suit small, simple forms. Reactive forms define the model explicitly in the component with FormControl, FormGroup and FormArray, giving synchronous access, strong typing, easier dynamic fields, observable valueChanges and simpler unit testing. Most enterprise Angular applications use reactive forms for complex or validated forms.

What are FormControl, FormGroup, FormArray and FormBuilder?

Show answer

FormControl tracks the value and validation state of a single input. FormGroup groups named controls into an object, such as a registration form. FormArray holds a dynamic list of controls or groups, such as multiple phone numbers or order items. FormBuilder, usually NonNullableFormBuilder, is a helper service that creates these with shorter syntax, for example fb.group({ email: ['', Validators.required] }).

Write Mongoose queries to filter, sort, paginate and select fields for a products listing.

Show answer

Chain query helpers and run count in parallel. const filter = { category: req.query.category, price: { $gte: Number(req.query.min) || 0 }, isActive: true }; const [items, total] = await Promise.all([ Product.find(filter) .select('name price images rating') .sort({ rating: -1, _id: 1 }) .skip((page - 1) * limit) .limit(limit) .lean(), Product.countDocuments(filter) ]); Adding _id to the sort keeps the order stable between pages.

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.

What are decorators in TypeScript and how does Angular use them?

TypeScript and Modern JavaScriptEasy

Show answer

Decorators are functions that attach metadata or behaviour to classes, properties, methods or parameters using the @ syntax. Angular uses them to mark classes as framework building blocks: @Component, @Directive, @Pipe and @Injectable, along with property decorators like @Input, @Output, @ViewChild and @HostListener. Angular's compiler reads this metadata at build time to generate efficient rendering and dependency injection code.

Write a typed Express route in TypeScript that returns a product by id.

Show answer

Generics type params and response bodies. import { Router, Request, Response } from 'express'; import { Product } from '../models/product.model'; const router = Router(); router.get('/:id', async (req: Request<{ id: string }>, res: Response) => { const product = await Product.findById(req.params.id).lean(); if (!product) { return res.status(404).json({ message: 'Product not found' }); } res.json(product); }); export default router; // app.use('/api/products', router);

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.

Write a custom validator that rejects passwords without a number and an uppercase letter.

Show answer

A ValidatorFn returns null or an error map. import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; export function strongPassword(): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const value = control.value as string; if (!value) return null; const ok = /[A-Z]/.test(value) && /\d/.test(value); return ok ? null : { weakPassword: true }; }; } // password: ['', [Validators.required, strongPassword()]] // @if (form.controls.password.hasError('weakPassword')) { ... }

Angular calls the Express API on a different port during development and gets CORS errors. What are your options?

Show answer

In development, the cleanest fix is an Angular dev server proxy: a proxy.conf.json mapping /api to http://localhost:3000, so the browser sees same-origin requests. Alternatively enable the cors middleware in Express with the Angular origin allowed. In production, serve both under one domain through Nginx or configure CORS with an explicit allowlist, enabling credentials only when cookies are used.

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

Show answer

Use a FormArray of FormGroups, each with product, quantity and price controls and validators like min(1). Provide addItem and removeItem methods that push or removeAt on the array, and render rows with @for over items.controls. Calculate the total from valueChanges or a computed signal. On submit, send getRawValue() typed as the order DTO, and disable the submit button while invalid or pending.

What is the difference between PUT and PATCH?

Show answer

PUT replaces the entire resource with the representation sent, so missing fields may be removed or reset, and it is idempotent. PATCH applies a partial update, changing only the fields provided, such as updating only an order's status. In a MEAN API, PATCH with $set in MongoDB is the common choice for edit forms. Validate PATCH bodies so clients cannot modify protected fields like role or price.

What are Mongoose virtuals, instance methods and statics?

Show answer

Virtuals are computed properties not stored in MongoDB, such as fullName from firstName and lastName, or a virtual populate that links related documents. Instance methods are functions available on each document, like user.comparePassword(). Statics are functions on the model itself, like User.findByEmail(email). Virtuals are excluded from JSON output unless you enable toJSON: { virtuals: true } in schema options.

How do you validate request data in an Express API, and why is it necessary even with Angular validation?

Show answer

Frontend validation improves user experience, but anyone can call the API directly with tools like Postman or curl, so the server must validate everything. Use a schema library such as zod, Joi or express-validator in middleware to check types, required fields, lengths and formats, reject unknown fields and return 400 with clear field errors. Mongoose validation is a second layer close to the data.

What are databases, collections and documents in MongoDB?

Show answer

A MongoDB deployment holds multiple databases, each database contains collections, and each collection contains documents. A document is a BSON object with fields, arrays and nested sub-documents, identified by a unique _id. Collections are roughly like tables but do not force all documents to share the same fields, although schema validation can enforce rules. A single document can be up to 16 MB in size.

Tell me about a time you worked closely with a frontend developer to define an API.

Show answer

Situation: our Angular developer and I were starting a new invoices module. Task: agree on the API before coding in parallel. Action: I drafted an OpenAPI spec with sample responses, we reviewed it together, adjusted field names and pagination to match the screens, and I provided a mock server so she could start immediately. Result: integration took one day instead of a week and we had almost no rework.

Explain the four types of data binding in Angular.

Show answer

Interpolation, {{ value }}, displays component data as text. Property binding, [src]='imageUrl', sets a DOM or component property. Event binding, (click)='save()', calls a method when an event fires. Two-way binding, [(ngModel)]='name' or [(value)] with a model input, combines property and event binding so the view and component stay in sync. Data flows one way by default, which keeps changes predictable.

Build a reactive login form with validation using NonNullableFormBuilder.

Show answer

Typed controls and disabled submit while invalid. export class LoginComponent { private fb = inject(NonNullableFormBuilder); form = this.fb.group({ email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(8)]] }); submit() { if (this.form.invalid) return this.form.markAllAsTouched(); this.auth.login(this.form.getRawValue()).subscribe(); } } // template // <form [formGroup]='form' (ngSubmit)='submit()'> // <input formControlName='email'> // @if (form.controls.email.hasError('email')) { <small>Invalid email</small> } // <button [disabled]='form.invalid'>Login</button> // </form>

What are standalone components and why are they now the default?

Show answer

Standalone components declare their own dependencies in an imports array instead of belonging to an NgModule. Since Angular 19 they are the default, and the CLI generates them without NgModules. They reduce boilerplate, make lazy loading simpler with loadComponent, improve tree shaking and make components easier to understand and test. Applications bootstrap with bootstrapApplication and configure providers in app.config.ts.

Why is MongoDB a natural fit for a JavaScript stack like MEAN?

Show answer

MongoDB stores data as JSON-like BSON documents, which map directly to JavaScript and TypeScript objects used in Express and Angular, so there is little translation between layers. Its flexible schema helps when requirements change quickly, and features like rich queries, aggregation, indexes, replication and Atlas cloud hosting cover most web application needs. Mongoose adds schemas, validation and TypeScript support on top of the driver.

Why do you want to work with the MEAN stack and Angular specifically?

Show answer

I like that Angular gives a complete, structured framework with TypeScript, dependency injection, routing and forms built in, so large teams write consistent code. Combined with Node.js, Express and MongoDB, I can build full features in one language family. Many enterprise and IT service projects in India use Angular, and I want to grow as a full stack developer who builds maintainable business applications.

What types of indexes does MongoDB support?

Show answer

MongoDB supports single-field and compound indexes, multikey indexes for array fields, text indexes for keyword search, geospatial 2dsphere indexes for location queries, hashed indexes for sharding, wildcard indexes for unpredictable fields, TTL indexes that delete documents after a time, and unique, partial and sparse options. Atlas also provides Atlas Search for full-text relevance and Vector Search for AI similarity queries.

Write a custom attribute directive that highlights an element on hover.

Angular Components and TemplatesMedium

Show answer

Host listeners handle the events. import { Directive, ElementRef, HostListener, inject, input } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { private el = inject(ElementRef); color = input('yellow', { alias: 'appHighlight' }); @HostListener('mouseenter') onEnter() { this.el.nativeElement.style.backgroundColor = this.color(); } @HostListener('mouseleave') onLeave() { this.el.nativeElement.style.backgroundColor = ''; } } // usage: <p appHighlight='lightblue'>Hover me</p>

Configure an Angular dev server proxy to forward API calls to Express.