Interview Q&A

Short answer: Lazy loading loads feature modules only when needed (e.g., when a user navigates to a route). Benefits: Reduces initial bundle size → faster app startup. Improves performance and user experience. Enables better code splitting and modularity. Angular supports lazy loading via dynamic route configuration: { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) }

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: gainst XSS and CSRF? XSS (Cross-Site Scripting) Protection: Angular automatically sanitizes dangerous content in templates (e.g., {{ userInput }}). Use DomSanitizer for trusted content. Binding syntax prevents direct HTML injection. CSRF (Cross-Site Request Forgery) Protection: Angular’s HttpClient works with backend CSRF tokens. Common… approach: Backend……… sends CSRF token, Angular sends it back via headers or…

Explain a bit more

cookies. Developers must implement token handling in interceptors.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: JWT is a compact, URL-safe token format that securely transmits information between parties. Contains a payload with user info and claims, digitally signed. Angular apps use JWT to: Store authentication state. Send it with API requests to authorize access. Decode JWT to get user roles, expiry, etc.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: rray. Use useClass, useValue, or useFactory to inject mocks. class MockDataService { getData() { return of(['mock data']); } } beforeEach(() => { TestBed.configureTestingModule({ providers: [{ provide: DataService, useClass: MockDataService }] }); }); rray. Use useClass, useValue, or useFactory to inject mocks.

Example code

… class MockDataService {… getData() { return of(['mock data']); } } beforeEach(() => { TestBed.configureTestingModule({ providers: [{ provide: DataService, useClass: MockDataService }] }); }); rray. Use useClass, useValue, or useFactory to inject mocks. Example: class MockDataService { getData() { return of(['mock data']); } } beforeEach(() => { TestBed.configureTestingModule({ providers: [{ provide: DataService, useClass: MockDataService }] }); }); rray. Use useClass, useValue, or useFactory to inject mocks. Example:… class MockDataService { getData() { return of(['mock data']); } } beforeEach(() => { TestBed.configureTestingModule({ providers: [{ provide: DataService, useClass: MockDataService }] }); });

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Comman Purpose ng serve Builds app in memory, runs a dev server, watches files, reloads on changes (for development) ng build Builds app to disk, generates production or development-ready output files

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: CommonModule provides common directives like *ngIf, *ngFor, ngClass, etc. You import it in feature modules or any module other than the root module. Don’t import BrowserModule in feature modules; instead, import CommonModule there.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ngular reuses existing DOM elements instead of recreating them.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Class Role FormContr ol Tracks value and validation status of a single input FormGroup Groups multiple FormControls into a form FormArray Manages an array of FormControls or FormGroups dynamically

Example code

Class Role
FormContr ol Tracks value and validation status of a single input FormGroup Groups multiple FormControls into a form
FormArray Manages an array of FormControls or FormGroups dynamically

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Aspect Constructor ngOnInit Purpose Initializes the class Lifecycle hook, called after constructor Use Case Inject dependencies Fetch data, initialize logic Called By JavaScript engine Angular

Example code

constructor(private userService: UserService) {} ngOnInit() { this.userService.getUsers().subscribe(users => this.users = users); } Real-Time Example: In a profile component: Use constructor to inject ProfileService Use ngOnInit to fetch the user's data after initialization

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Use Ahead-of-Time (AOT) compilation for faster rendering.

Explain a bit more

Enable production builds (ng build --prod) with optimizations: Minification Tree shaking Dead code elimination Use lazy loading for feature modules. Bundle analysis: Use tools like source-map-explorer to find large bundles. Use Angular’s built-in caching and service workers (via Angular PWA) for offline and faster repeat loads. Optimize images and assets (compress, lazy load). Use OnPush change detection for components to reduce unnecessary UI updates. Avoid memory leaks by unsubscribing from observables. Use trackBy function with *ngFor to optimize DOM updates.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Dependency Injection (DI) is a design pattern in which objects receive their dependencies from an external source, not by creating them. Angular has a built-in DI system that allows services to be injected into components or other services.

Example code

constructor(private authService: AuthService) {} Real-Time Example: In an e-commerce app: Inject CartService into CartComponent to manage cart items.

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: And faster repeat loads. Optimize images and assets (compress, lazy load). Use OnPush change detection for components to reduce unnecessary UI updates. Avoid memory leaks by unsubscribing from observables. Use trackBy function with *ngFor to optimize DOM updates.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: CustomEvent is a native JavaScript event that allows sending custom data. In Angular, used in event emitters to pass data from child to parent components. Angular wraps this with @Output() and EventEmitter.

Example code

@Output() myEvent = new EventEmitter<string>(); this.myEvent.emit('some data');

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: NgRx is a Redux-inspired state management library for Angular. Uses Actions, Reducers, Store, and Effects to handle application state predictably. Centralizes state for easy debugging, time-travel, and immutability. Ideal for complex apps requiring consistent global state management.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: TestBed: Core Angular testing utility to configure test modules and components. ngMocks: A library built on top of TestBed to simplify mocking and reduce boilerplate by auto-mocking components, directives, pipes, and services.

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Use the production flag with ng build: ng build --prod This enables: AOT compilation (Ahead-of-Time) Minification and Uglification of code Tree shaking to remove unused code Bundling for fewer HTTP requests Enables optimizations in angular.json

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: BrowserModule includes services essential for running the app in a browser. It also exports CommonModule. Should only be imported once, in the root AppModule. It sets up things like DOM rendering, sanitization, and event handling.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ChangeDetectorRef allows you to manually control change detection: detectChanges(): Run change detection immediately. markForCheck(): Mark component to check in next cycle. detach(): Stop change detection for component. reattach(): Resume change detection. ✅

Example code

constructor(private cd: ChangeDetectorRef) {} updateData() { this.data = fetchNewData(); this.cd.detectChanges(); // manually trigger update }

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ngular has a built-in DI system that allows services to be injected into components or other services. constructor(private authService: AuthService) {} Real-Time Example: In an e-commerce app: Inject CartService into CartComponent to manage cart items.

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Unsubscribe from Observables using: takeUntil with a destroy notifier. async pipe which auto-unsubscribes. Remove event listeners added manually. Avoid retaining references to DOM or large objects. Use tools like Chrome DevTools and Angular Profiler.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Angular uses NgZone to detect asynchronous events (like clicks, timers, HTTP). NgZone runs code inside Angular's zone, triggering change detection automatically. You can run code outside Angular's zone to prevent unnecessary change detection. ✅

Example code

constructor(private ngZone: NgZone) {} runHeavyTaskOutsideAngular() { this.ngZone.runOutsideAngular(() => { // code here won't trigger change detection }); }

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Create a validator function returning an error object or null.

Explain a bit more

✅ Example (Custom validator checking forbidden name): function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const forbidden = nameRe.test(control.value); return forbidden ? { forbiddenName: { value: control.value } } : null; }; } // Usage: new FormControl('', [forbiddenNameValidator(/admin/i)])

Example code

Create a validator function returning an error object or null. ✅ Example (Custom validator checking forbidden name): function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => {
const forbidden = nameRe.test(control.value);
return forbidden ? { forbiddenName: { value: control.value } } : null; }; } // Usage: new FormControl('', [forbiddenNameValidator(/admin/i)])

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Name some commonly used decorators. Decorators are functions that add metadata to classes, methods, or properties. Common Angular Decorators: Decorator Description @Componen Declares a component @NgModule Declares a module @Injectab le Declares a service for DI @Input() Pass data from parent to child @Output() Emit events from child to parent @Directiv Create custom directives

Example code

@Component({ selector: 'app-header', templateUrl: './header.component.html' }) Real-Time Example: Use @Input() in a product card to pass product details from a parent ProductListComponent.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Applications? Unsubscribe from Observables using: takeUntil with a destroy notifier. async pipe which auto-unsubscribes. Remove event listeners added manually. Avoid retaining references to DOM or large objects. Use tools like Chrome DevTools and Angular Profiler.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: @ngrx/store provides a Redux-style store implementation. It holds the application state as a single immutable object. Provides selectors to access state slices. Dispatches actions to modify the state via reducers.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.