MEAN Stack Rapid-Fire Questions &amp; Answers

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.

How do toSignal and toObservable bridge RxJS and signals?

RxJS, Signals and State ManagementMedium

Show answer

toSignal(observable$) subscribes to an Observable and exposes its latest value as a signal, unsubscribing automatically when the injection context is destroyed; you can supply an initialValue or requireSync. toObservable(signal) creates an Observable that emits whenever the signal changes, letting you apply RxJS operators like debounceTime and switchMap. Together they let you keep simple state in signals while using RxJS for async logic.

Explain optional chaining and nullish coalescing with examples.

Show answer

Optional chaining (?.) stops evaluation and returns undefined if the value before it is null or undefined, so user?.address?.city never throws. Nullish coalescing (??) provides a fallback only for null or undefined, unlike || which also replaces 0, empty string and false. So settings.pageSize ?? 10 keeps a real value of 0. Both work in TypeScript and in Angular templates.

What is the difference between an interface and a type alias in TypeScript?

Show answer

Both describe the shape of data. Interfaces are open, so declarations with the same name merge, and they can be extended with extends, which suits object models and class contracts. Type aliases can describe unions, intersections, tuples, primitives and mapped types, such as type Status = 'active' | 'blocked'. Many teams use interfaces for object shapes like API models and type aliases for unions and utility compositions.

What is RxJS and why is it important in Angular?

RxJS, Signals and State ManagementEasy

Show answer

RxJS is a library for reactive programming with Observables, streams of values over time, combined using operators. Angular uses it in HttpClient, router events, reactive forms valueChanges and many third-party libraries. It excels at asynchronous workflows such as type-ahead search, polling, websocket streams, retries and combining multiple requests. Signals handle synchronous state well, while RxJS remains the tool for complex event streams.

What is the difference between a cold and a hot Observable?

RxJS, Signals and State ManagementMedium

Show answer

A cold Observable starts producing values when each subscriber subscribes, and every subscriber gets its own independent execution; an HttpClient call is cold, so two subscriptions send two requests. A hot Observable produces values regardless of subscribers, and subscribers share the same stream, like mouse events or a websocket. You can make a cold Observable shared with operators like share or shareReplay.

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

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.

What testing tools are used in Angular projects today?

Security, Testing and DeploymentMedium

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.

What types of indexes does MongoDB support?

MongoDB Data Modelling and QueriesMedium

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.

How do you test Express APIs and MongoDB logic in a MEAN project?

Security, Testing and DeploymentEasy

Show answer

Write unit tests for services with Jest or Vitest, mocking external providers. For integration tests, use Supertest to send requests to the exported Express app and mongodb-memory-server or a disposable Docker MongoDB for realistic queries, seeding and cleaning data around each test. Test validation errors, auth failures and permissions, not only happy paths. Run tests in CI on every pull request.

What is NgRx and when is it worth using in an Angular application?

RxJS, Signals and State ManagementHard

Show answer

NgRx is a state management library family for Angular. NgRx Store follows the Redux pattern with actions, reducers, selectors and effects for side effects, giving predictable state and powerful DevTools. NgRx SignalStore offers a lighter, signal-based way to build stores with state, computed values and methods. It is worth it for large apps with complex shared state and many developers; small apps do fine with services and signals.

What are pipes in Angular and what is the difference between pure and impure pipes?

Angular Components and TemplatesMedium

Show answer

Pipes transform values in templates, such as {{ price | currency:'INR' }}, date, uppercase, json and async. A pure pipe, the default, runs only when its input reference or primitive value changes, so it is very efficient. An impure pipe runs on every change detection cycle, which can hurt performance, and is needed only when output depends on mutable data. Prefer pure pipes or computed signals.

Why does Angular use TypeScript, and what benefits does it bring to a MEAN project?

Show answer

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Angular is written in TypeScript and relies on its types and decorators for components, dependency injection and templates. Types catch mistakes at compile time, improve editor autocompletion and make refactoring large codebases safer. In MEAN projects, you can share interfaces such as User or Order between the Express API and the Angular client.

What is MongoDB Atlas and what features does it offer?

Show answer

MongoDB Atlas is the fully managed cloud service for MongoDB on AWS, Azure and Google Cloud. It handles provisioning, replica sets, automated backups, scaling, monitoring, security features like network access lists and encryption, and performance advice such as index suggestions. It also offers Atlas Search, Vector Search and data federation. A free tier makes it popular for learning projects and MEAN prototypes.

What are Mongoose virtuals, instance methods and statics?

MongoDB Data Modelling and QueriesMedium

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.

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.

How do you design REST endpoints for a resource like orders, including nested data?

Show answer

Use plural nouns and HTTP methods: GET /orders, GET /orders/:id, POST /orders, PATCH /orders/:id and DELETE /orders/:id. For related data, use shallow nesting like GET /users/:id/orders. Express actions that are not CRUD as sub-resources or clear verbs, such as POST /orders/:id/cancel. Support filtering, sorting and pagination with query parameters, return proper status codes and document the API with OpenAPI.

What do the strict compiler options in tsconfig.json do?

Show answer

Setting strict to true enables a family of checks, including strictNullChecks, so null and undefined must be handled explicitly; noImplicitAny, which errors on untyped values; strictPropertyInitialization, which requires class fields to be initialised; and strictFunctionTypes. New Angular projects enable strict mode and strict templates by default, which catches many bugs early, though migrating an old non-strict project needs gradual fixes.

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.

Explain the any, unknown and never types in TypeScript.

Show answer

any switches off type checking, so any operation is allowed and errors move to runtime. unknown also accepts any value but forces you to narrow it with typeof, instanceof or a type guard before using it, making it the safe choice for parsed JSON or caught errors. never represents values that never occur, such as a function that always throws, and is used in exhaustive switch checks.

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().

What is the role of a controller-service-repository structure in an Express API?

Show answer

Controllers handle HTTP: they read request data, call services and format responses with status codes. Services contain business rules, such as checking stock before creating an order, and are independent of Express. Repositories or models encapsulate database access through Mongoose. This separation makes code easier to test, lets you reuse services in jobs or other transports, and stops route files from turning into large unmaintainable blocks.

How is routing configured in a standalone Angular application?

Show answer

You define a Routes array mapping paths to components, with redirectTo, child routes and a wildcard ** route for 404 pages, and register it with provideRouter(routes) in app.config.ts. The root template contains <router-outlet />, links use routerLink and routerLinkActive, and code navigates with Router.navigate. Features such as withComponentInputBinding let route parameters bind directly to component inputs.

How does the Node.js event loop affect the way you write Express route handlers?

Show answer

Every request handler runs on the same main thread, so any synchronous heavy work, such as a large loop, JSON parsing of huge payloads, sync file reads or bcrypt with sync methods, blocks all other requests. Write handlers with async I/O, keep CPU work small, stream large data, and offload heavy jobs to worker threads or a queue. Monitor event-loop lag in production to catch blocking code.

What are the main steps to deploy a MEAN application to production?

Security, Testing and DeploymentEasy

Show answer

Build Angular with ng build to produce optimised static files and compile the TypeScript API. Host the Angular files on a CDN, static host or Nginx, and run the API on a VM, container service or Kubernetes with environment variables. Use MongoDB Atlas or a managed replica set. Configure HTTPS, domain DNS, CORS, logging and monitoring, and automate everything through a CI/CD pipeline.

What is the inject() function and how does it compare to constructor injection?

Services, Dependency Injection and RoutingMedium

Show answer

inject() retrieves a dependency inside an injection context, such as a field initialiser, constructor, factory or functional guard. It removes long constructor parameter lists, works in plain functions like functional guards, interceptors and resolvers, and makes inheritance simpler because subclasses do not need to pass dependencies to super. Constructor injection still works, but modern Angular code and CLI templates favour inject().

How do you read route parameters and query parameters in an Angular component?

Show answer

Inject ActivatedRoute and read paramMap or queryParamMap, which are Observables, for example route.paramMap.pipe(map(p => p.get('id'))), so the component updates when the same route is reused with a new id. A snapshot gives a one-time value. With withComponentInputBinding enabled in provideRouter, route params, query params and resolver data can bind directly to component inputs, which is the simplest modern approach.

What are HTTP interceptors and what are common use cases?

Angular Forms and HTTP ClientMedium

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.

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 decorators in TypeScript and how does Angular use them?

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.

What is type narrowing and what are type guards?

Show answer

Narrowing is TypeScript refining a broad type to a more specific one inside a code block based on checks. typeof, instanceof, the in operator, equality checks and discriminated union tags all narrow types. A custom type guard is a function returning a predicate like value is Admin, which tells the compiler the type after the check. This makes handling union types, such as API success or error responses, safe.

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.

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

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.

What are directives in Angular and what types exist?

Angular Components and TemplatesMedium

Show answer

Directives add behaviour to elements. Components are directives with templates. Attribute directives change appearance or behaviour of an existing element, such as ngClass, ngStyle or a custom appHighlight using host bindings. Structural directives change the DOM layout by adding or removing elements, like the older *ngIf and *ngFor, now largely replaced by built-in control flow. Custom directives keep repeated DOM logic out of components.

What is a service in Angular and why should business logic live there?

Show answer

A service is a class, usually decorated with @Injectable, that holds logic or data not tied to a single view, such as API calls, authentication, caching or shared state. Keeping this out of components makes components thin and focused on presentation, lets several components share the same data, and makes logic easy to unit test by injecting mock services. Services are created and supplied by Angular's dependency injection system.

Explain dependency injection in Angular.

Show answer

Dependency injection means a class asks for what it needs instead of creating it. Angular's injector creates instances based on providers and supplies them when a component or service requests them, either through constructor parameters or the inject() function. This decouples code, enables singletons, and lets tests or different environments swap implementations, for example providing a mock AuthService in unit tests.

How do real-time features work in a MEAN application?

Show answer

Use WebSockets, commonly through Socket.IO on the Express server and its client library in an Angular service that exposes events as Observables or signals. The server emits events, such as new chat messages or order status changes, to rooms of interested users. For scaling across instances, add a Redis adapter. Server-sent events are a simpler option for one-way updates like notifications or live dashboards.

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.

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 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.

Which security measures should every Express API in a MEAN app have?

Security, Testing and DeploymentEasy

Show answer

Use HTTPS, helmet for security headers, a strict CORS allowlist, input validation on every route, rate limiting on auth endpoints, body size limits, parameterised queries and stripped MongoDB operators, bcrypt for passwords, secrets in environment variables, and least-privilege database users. Keep dependencies updated with npm audit or Dependabot, log security events and never return stack traces in production.

What is the difference between signal, computed and effect?

RxJS, Signals and State ManagementEasy

Show answer

signal() creates writable state. computed() derives a read-only value from other signals, is lazily evaluated and memoised, and recalculates only when its dependencies change, for example a cart total from cart items. effect() runs side effects whenever signals it reads change, such as logging or syncing to local storage. Use computed for derived data and keep effects for non-UI side effects, not for setting other state.

What are TypeScript utility types such as Partial, Pick, Omit and Record used for?

Show answer

Utility types transform existing types instead of duplicating them. Partial<User> makes all fields optional, useful for update payloads. Pick<User, 'id' | 'name'> selects fields, and Omit<User, 'password'> removes them, handy for safe API responses. Record<string, number> describes an object map with typed keys and values. Readonly<T> and Required<T> are also common, and they keep frontend and backend models consistent.

What are signals in Angular and why were they introduced?

RxJS, Signals and State ManagementEasy

Show answer

A signal is a reactive value container: you read it by calling it, count(), and update it with set or update. Angular tracks which templates, computed values and effects read a signal, so when it changes only dependent parts update. Signals give fine-grained reactivity, enable zoneless change detection and are simpler than RxJS for synchronous component state. They are stable and central to modern Angular.

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 FormControl, FormGroup, FormArray and FormBuilder?

Angular Forms and HTTP ClientEasy

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] }).

What is HttpClient and how is it set up in a standalone Angular app?

Angular Forms and HTTP ClientEasy

Show answer

HttpClient is Angular's service for making HTTP requests. It returns Observables, automatically parses JSON, supports typed responses with generics, interceptors, progress events and request cancellation by unsubscribing. In a standalone app you register it with provideHttpClient() in app.config.ts, optionally with withInterceptors([...]) and withFetch() to use the Fetch API, which is recommended for server-side rendering.

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.

What is the difference between an Observable and a Promise?