Interview Q&A

Short answer: Use async/await with Angular's waitForAsync or Jasmine’s done callback. Use Angular’s fakeAsync and tick() to simulate asynchronous passage of time. Example with fakeAsync: it('should fetch data asynchronously', fakeAsync(() => { let data; service.getData().subscribe(result => data = result); tick(); // simulate async time passing expect(data).toEqual(['expected 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: angular.json is the workspace configuration file. Defines project settings including: Build and serve options File assets Environment configurations Output paths Third-party library styles and scripts Controls how Angular CLI builds and serves your app.

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: Lazy loading delays loading feature modules until the user navigates to their route. Implemented with the router using loadChildren and dynamic imports.

Example code

const routes: Routes = [ { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } ]; This reduces initial bundle size and improves app startup time.

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: utomatically. You can run code outside Angular's zone to prevent unnecessary change detection. ✅ constructor(private ngZone: NgZone) {} runHeavyTaskOutsideAngular() { this.ngZone.runOutsideAngular(() => { // code here won't trigger change detection }); } utomatically. 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 }); } utomatically. You can run code outside Angular's zone to prevent unnecessary change detection. ✅ Example: constructor(private ngZone: NgZone) {} runHeavyTaskOutsideAngular() { this.ngZone.runOutsideAngular(() => { // code here won't trigger change detection }); } utomatically. You can run code outside Angular's zone to prevent… unnecessary change detection. ✅ Example: 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: ngular? 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…… }… ngular? ngular? Create a validator function returning an…

Explain a bit more

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 }… ngular? 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 ? {… ngular?… const forbidden = nameRe.test(control.value);

Example code

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: 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…… @Component({ selector: 'app-header', templateUrl:…

Example code

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: Memoization: A technique to cache the results of expensive function calls and return the cached result when inputs are the same.

Explain a bit more

How it helps: Avoids recalculating heavy operations on every change detection. Improves performance for pure functions or selectors. ✅ Example in Angular: const memoizedFunction = memoize((input) => { // expensive calculation return result; }); this.result = memoizedFunction(input); You can use libraries like lodash's _.memoize or write your own. Angular Module System

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: Use Async Validators returning Observable<ValidationErrors | null>. ✅

Example code

function uniqueUsernameValidator(service: UserService): AsyncValidatorFn { return (control: AbstractControl): Observable<ValidationErrors | null> => { return service.checkUsername(control.value).pipe( map(isTaken => (isTaken ? { uniqueUsername: true } : null)) ); }; } // Usage: new FormControl('', null, uniqueUsernameValidator(this.userService));

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: Pipes transform data in templates. Used with the pipe | operator. Angular provides built-in pipes like date, currency, uppercase, async, etc.

Example code

<p>{{ birthday | date:'longDate' }}</p>

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: Use HttpClientTestingModule and HttpTestingController to mock and control HTTP requests.

Example code

beforeEach(() => { TestBed.configureTestingModule({ imports: [HttpClientTestingModule] }); httpTestingController = TestBed.inject(HttpTestingController); }); it('should call GET API', () => { service.getData().subscribe(data => { expect(data).toEqual(mockData); }); const req = httpTestingController.expectOne('api/data'); expect(req.request.method).toBe('GET'); req.flush(mockData); httpTestingController.verify(); });

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 CLI supports custom builders to extend build behavior. Create a Node.js package implementing the Builder interface. Define builder options and logic in a builders.json. Use the custom builder in angular.json for build or serve targets. Use case: Customized builds, code analysis, or special deployment pipelines.

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: Used mainly by feature modules that provide services and routes. forRoot() configures and provides singleton services for the app. Usually called in the root module. forChild() configures child routes without providing new service instances.

Example code

RouterModule.forRoot(routes) // for root app routing RouterModule.forChild(childRoutes) // for feature module routing

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 for performance improvement? Memoization: technique to cache the results of expensive function calls and return the cached result when inputs are the same. ngular for performance improvement? Memoization: technique to cache the results of expensive function calls and return the cached result when inputs are the same. How it helps: Avoids…… recalculating heavy operations on every 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: synchronously in Angular? Use Async Validators returning Observable<ValidationErrors | null>. ✅ function uniqueUsernameValidator(service: UserService): syncValidatorFn { return (control: AbstractControl): Observable<ValidationErrors | null> => { return service.checkUsername(control.value).pipe( map(isTaken => (isTaken ? {… uniqueUsername: true } :…… null)) ); }; } // Usage: new FormControl('', null,…

Explain a bit more

uniqueUsernameValidator(this.userService)); synchronously in Angular? synchronously in Angular? Use Async Validators returning Observable<ValidationErrors | null>. ✅

Example code

function uniqueUsernameValidator(service: UserService): syncValidatorFn { return (control: AbstractControl): Observable<ValidationErrors | null> => { return service.checkUsername(control.value).pipe( map(isTaken => (isTaken ? {… uniqueUsername: true } :… null)) ); }; } // Usage: new FormControl('', null, uniqueUsernameValidator(this.userService)); synchronously in Angular? synchronously in Angular? Use Async Validators returning Observable<ValidationErrors | null>. ✅ Example: function uniqueUsernameValidator(service: UserService): syncValidatorFn { return (control: AbstractControl): Observable<ValidationErrors | null> => { return service.checkUsername(control.value).pipe( map(isTaken => (isTaken ? { uniqueUsername: true } :… null)) ); }; } // Usage: new FormControl('', null, uniqueUsernameValidator(this.userService)); synchronously in Angular? Use Async Validators returning Observable<ValidationErrors | null>. ✅ Example: function uniqueUsernameValidator(service: UserService): syncValidatorFn { return (control: AbstractControl): Observable<ValidationErrors | null> => { return service.checkUsername(control.value).pipe( map(isTaken => (isTaken ? { uniqueUsername: true } : null)) ); }; } // Usage: new FormControl('', null, uniqueUsernameValidator(this.userService));

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: A component is the building block of Angular apps. Each component controls a part of the UI. A component includes: TypeScript class HTML template CSS styles

Example code

@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent { // logic here } Real-Time Example: In a ride-sharing app: LoginComponent handles user login. MapComponent shows real-time driver locations.

Real-world example (ShopNest)

ShopNest’s ProductListComponent binds *ngFor to products and uses (click) to add to cart.

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: Implement a global error handler by extending Angular’s ErrorHandler class: @Injectable() export class GlobalErrorHandler implements ErrorHandler { handleError(error: any) { // log to server or show user notification console.error('Global error:', error); } } Provide it in your AppModule: providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }] Can also use HTTP interceptors to catch API errors.

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: spyOn() creates a spy on a method, allowing you to track calls and override behavior.

Example code

spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions.

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: RouterModule provides Angular’s routing functionality. Import it to define routes and use routing directives like [routerLink] and <router-outlet>. It configures navigation and URL handling in the app. Angular CLI & Build System

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: pplication? Implement a global error handler by extending Angular’s ErrorHandler class: @Injectable() export class GlobalErrorHandler implements ErrorHandler { handleError(error: any) { // log to server or show user notification console.error('Global error:', error); } } Provide it in your AppModule: providers: [{ provide: ErrorHandler,… useClass:……… pplication? pplication? Implement a global error handler by…

Explain a bit more

extending Angular’s ErrorHandler class: @Injectable() export class GlobalErrorHandler implements ErrorHandler { handleError(error: any) { // log to server or show user notification console.error('Global error:', error); } } Provide it in your AppModule: providers: [{ provide: ErrorHandler, useClass:… pplication? Implement a global error handler by extending Angular’s ErrorHandler class: @Injectable() export class GlobalErrorHandler implements ErrorHandler { handleError(error: any) { // log to server or show user notification console.error('Global error:', error); } } Provide it in your AppModule: providers: [{ provide:… pplication?…

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 class with the @Pipe decorator implementing PipeTransform. Implement a transform() method with your logic. Example: @Pipe({ name: 'exclaim' }) export class ExclaimPipe implements PipeTransform { transform(value: string): string { return value + '!!!';

Example code

}
} Use in template: <p>{{ 'Hello' | exclaim }}</p> <!-- Outputs: Hello!!! -->

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 tests? spyOn() creates a spy on a method, allowing you to track calls and override behavior. spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions. ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override… behavior.

Example code

spyOn(service,… 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions. ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override behavior. Example: spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions. ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override… behavior. Example: spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions.

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: AOT compiles templates before runtime, improving startup performance. Enable via: ng build --aot Usually enabled automatically with --prod. Can be configured in angular.json: "configurations": { "production": { "aot": true }

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: Validators provides built-in validators like required, minLength, maxLength, email. ✅

Example code

new FormControl('', [Validators.required, Validators.email])

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: <ng-content> is used for content projection, i.e., to pass custom content into a component from a parent.

Example code

<!-- alert.component.html --> <div class="alert-box"> <ng-content></ng-content> </div> Usage: <app-alert> <p>Warning! Something went wrong.</p> </app-alert> Real-Time Example: Reusable modal or alert components that display different messages using <ng-content>.

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: tsconfig.json configures the TypeScript compiler.

Explain a bit more

Specifies: Target JS version (ES5/ES2015) Module system (ESNext/CommonJS) Included/excluded files Compiler options like strictness, decorators support Helps Angular’s build system transpile TS code to browser-compatible JS. Summary Table: Command/File Purpose Angular CLI Tool to scaffold, build, test Angular apps ng serve Run dev server with live reload ng build Compile and output build files Production Build ng build --prod enables optimizations angular.json CLI workspace/project configuration Custom Builder Extend Angular CLI build/serve functionality AOT Compilation Compile templates ahead-of-time for faster startup tsconfig.json TypeScript compiler options for Angular project Testing Angular Applications

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.