Interview Q&A

Short answer: pp. Lazy load feature modules: Load modules on demand to improve startup time. Use state management (e.g., NgRx) when app state becomes complex. Adopt consistent routing with child routes.

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 9: Default usage of Ivy compiler and renderer.

Explain a bit more

Improved type checking in templates. Better build errors and debugging. Smaller bundle sizes. Later versions added: Strict typing for reactive forms. Improved Component harnesses for testing. Enhanced internationalization (i18n) support. Optional chaining and other TypeScript improvements. Standalone components (Angular 14+), simplifying module-less apps. Signals (Angular 16+) for reactive primitives.

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: SSR means rendering the app’s HTML on the server before sending it to the client. With Angular Universal, the app runs on Node.js server rendering Angular components into HTML. The client then takes over via Angular’s client-side rendering (hydration).

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? Jasmine: Testing framework for specs & assertions. Karma: Test runner to execute tests in browsers. Protractor (deprecated, but still used): E2E testing framework. Jest: Popular alternative to Jasmine for unit testing. ng-mocks: Helps mock Angular components, directives, pipes, and modules.

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? ng serve builds and launches a development server that hosts your app locally. It watches for file changes and automatically reloads the app (live-reload). Useful during development for rapid testing. ng serve

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: @NgModule is a decorator that defines a module. It declares which components, directives, and pipes belong to the module. It imports other modules needed for its components. It exports components/modules to make them available elsewhere. It configures services/providers scoped to the module.

Example code

@NgModule({ declarations: [MyComponent, MyDirective], imports: [CommonModule], exports: [MyComponent] }) export class MyModule {}

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: Change Detection Strategy Description When to Use Default Angular checks every component in the component tree every cycle Simple apps or components with frequent changes OnPush Angular checks component only if input references change or events Optimizes performance, suitable for immutable data & smart components How to set OnPush: @Component({ selector: 'app-example', changeDetection:…

Explain a bit more

ChangeDetectionStrategy.OnPush, template: `...` }) export class ExampleComponent {} Key Difference: Default: Runs change detection every time. OnPush: Runs only when inputs change by reference or manual trigger.

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: ✅

Example code

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)"> <input name="username" ngModel required minlength="4" /> <button type="submit">Submit</button> </form> onSubmit(form: NgForm) { console.log(form.value); }

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: pplies CSS class when link's route is ctive ✅ Example: <a routerLink="/home" routerLinkActive="active-link">Home</a> ctive-link is applied when the current route is /home.

Explain a bit more

ngular? You define route parameters using : in the route path and extract them using ctivatedRoute. ✅ Defining Route: { path: 'product/:id', component: ProductDetailComponent } ✅ Navigating with params: <a [routerLink]="['/product', product.id]">View Details</a> ngular routing? Query params are passed using the URL (e.g., ?sort=price), and managed via the ctivatedRoute service. ✅ Add query params: this.router.navigate(['/products'], { queryParams: { sort: 'price' } }); ✅ Read query params: this.route.queryParams.subscribe(params => { console.log(params['sort']); }); in Angular? ctivatedRoute is a service that gives access to route-related data including: Route parameters… pplies CSS class…… }

Example code

return true;
}
} { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] } ✅ Summary Table: Feature Purpose RouterModule Enables routing in Angular routerLink Binds HTML element to a route routerLinkAct ive pplies class when route is active ctivatedRout Provides access to route params/query params Lazy Loading Loads feature modules only when needed canActivate Route guard to block unauthorized access Query Params Used for filters, search, sort (/products?sort=price) Nested Routes Embeds child routes within parent route Forms in Angular

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: @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }

Example code

@Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow';
}
}

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: An Angular application mainly consists of: Modules (NgModules) – containers for a cohesive block of code Components – control views (HTML + logic) Templates – HTML with Angular syntax Services – for business logic and reusable code Directives – modify the DOM Routing – navigation between views Real-Time Example: In a banking app: A LoginComponent A DashboardComponent A UserService to manage user data…

Explain a bit more

AppRoutingModule for navigation between login and dashboard

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: Commonly done using: Login forms that send credentials to backend. Receive a token (usually JWT) to identify the user. Use Angular guards (like canActivate) to protect routes based on user roles. Store tokens securely (e.g., localStorage, sessionStorage, or cookies). Attach tokens to HTTP requests via HTTP 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: Common techniques: Use OnPush change detection. Implement trackBy in *ngFor. Use lazy loading for modules. Avoid heavy computations in templates. Use pure pipes for filtering/formatting. Use memoization to cache expensive function results. Detach change detector manually for rarely updated components. Use ngZone.runOutsideAngular() for non-Angular async operations.

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: ✅

Example code

// app-routing.module.ts const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} The RouterModule is a built-in Angular module that provides routing directives, services, and configuration to manage navigation between views. ✅ Imports in App: import { RouterModule } from '@angular/router'; You use it with RouterModule.forRoot() (for root module) or RouterModule.forChild() (for feature modules with lazy loading). Angular? Routes are defined as an array of objects using the Routes type, and each route object maps a path to a component. ✅ Example: const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'products', component: ProductListComponent }, { path: 'products/:id', component: ProductDetailComponent }, { path: '**', component: NotFoundComponent } // wildcard route ]; Tools for Managing Routes: Route Guards Route Parameters Lazy Loading Query Params Nested Routes implemented? 🔸 Lazy Loading: Lazy loading is a technique to load feature modules only when needed, improving initial load performance. ✅ Implementation:

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: These are attribute directives used to dynamically set styles or CSS classes.

Explain a bit more

➤ ngClass: Apply CSS classes <div [ngClass]="{'active': isActive, 'disabled': !isActive}"></div> ➤ ngStyle: Apply inline styles <div [ngStyle]="{'color': isError ?

Example code

user$ = this._user.asObservable(); setUser(user: User) { this._user.next(user); }
} ✅ 2. Using State Libraries NgRx (Redux pattern) Akita NGXS 📌 Real-Time Example: Store user data or app settings in a global AppStateService. Use the built-in HttpClient module for HTTP operations like GET, POST, PUT, DELETE. ✅ Example (GET request): constructor(private http: HttpClient) {} getUsers() { return this.http.get<User[]>('
} Ensure HttpClientModule is imported in AppModule. HttpClient is Angular’s built-in service for: Making HTTP requests (GET, POST, etc.) Automatically parsing JSON Supporting RxJS Observable streams Simplifying headers, error handling, etc. 📌 Real-Time Use: Fetching data from REST APIs Sending form data to the server Authentication and token handling HTTP requests? Use the catchError operator from RxJS to handle errors gracefully. ✅ Example: getUser() { return this.http.get('api/user').pipe( catchError(this.handleError) ); } handleError(error: HttpErrorResponse) { // Handle different error types return throwError(() => new Error('Something went wrong'));
} 📌 Real-Time Use Case: Show error toast if login fails Retry failed requests Navigate to error page (e.g., 404) work with HTTP requests? An Observable is a stream of asynchronous data. Angular HTTP methods return Observables using RxJS, allowing: Async operations (like API calls) Operators (map, filter, catchError) Subscription and cancellation ✅ Example: this.userService.getUsers().subscribe( users => this.users = users, error => console.error(error) ); 📌 Real-Time Use Case: Real-time data updates (e.g., chat, live stock prices) Async form submissions Progress indicators while loading data ✅ Summary Table: Concept Purpose Service Business logic & reusable functionality providedIn: 'root' Singleton service across app HttpClient Makes API calls, returns observables Observable Handles async data streams (e.g., HTTP) catchError Handles errors in HTTP requests AppStateServic Global state storage using RxJS (BehaviorSubject, etc.) RxJS (Reactive Programming) RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables to handle asynchronous data streams. To manage async operations (e.g., HTTP calls) For real-time event streams (like user input, socket, etc.) For composition and transformation of data streams It's the foundation of Angular’s reactive programming model, especially HttpClient, Forms, and Router. An Observable is a stream of data that can be observed over time. Observables emit values (0, 1, or many), errors, or a completion signal. ✅ Example: const observable = new Observable(observer => { observer.next('Data 1'); observer.next('Data 2'); observer.complete(); }); In Angular: this.http.get('api/data') // returns an Observable Promise? Feature Observable Promise Multiple Values ✅ Emits multiple values ❌ Resolves once Lazy Execution ✅ Executes only when subscribed ✅ Executes immediately Cancelable ✅ Can be cancelled via unsubscribe() ❌ Not cancelable Operators ✅ Chainable with RxJS operators ❌ Limited transformation Built-in in Angular ✅ Used by Angular APIs ✅ Supported for some features ✅ Use-case: Use Observable when dealing with: HTTP streams WebSocket streams User input streams Real-time data An Observer is an object with next(), error(), and complete() methods that receives notifications from an Observable. ✅ Example: const observer = { next: value => console.log('Received:', value), error: err => console.error('Error:', err), complete: () => console.log('Completed') }; observable.subscribe(observer); RxJS? The subscribe() method connects an Observer to an Observable. Once subscribed, the observer starts receiving emitted values. ✅ Example: myObservable.subscribe( value => console.log(value), // next error => console.error(error), // error () => console.log('Done') // complete ); examples of commonly used operators? Operators are functions used to transform, filter, combine, or control Observable streams. Operator Purpose map Transform emitted values filter Filter values based on condition mergeMap Flatten inner Observables concurrently switchMap Cancel previous Observable and switch concatMap Queue Observables, run one after another take Take first N values debounceT ime Delay emissions for a time catchErro Handle errors in stream and concatMap operators used for? ✅ map: Transform value source$.pipe(map(x => x * 2)) ✅ filter: Emit only values that meet condition source$.pipe(filter(x => x > 10)) ✅ mergeMap: Flatten Observables in parallel click$.pipe(mergeMap(() => http.get('/api'))) ✅ switchMap: Cancel previous Observable and switch to new one search$.pipe( debounceTime(300), switchMap(query => http.get(`/search?q=${query}`)) ✅ concatMap: Queue Observables sequentially tasks$.pipe(concatMap(task => http.post('/do', task))) using RxJS? ✅ Use forkJoin (all in parallel, wait until all complete): forkJoin({ user: this.http.get('/user'), orders: this.http.get('/orders') }).subscribe(data => { console.log(data.user, data.orders); }); ✅ Use mergeMap for dependent requests: this.http.get('/user').pipe( mergeMap(user => this.http.get(`/orders?userId=${user.id}`)) ).subscribe(...) different from an Observable? Feature Observable Subject Emits values Producer only Both producer and consumer Multicast ❌ No – one subscriber per emission ✅ Yes – shares data to many Use-case External data sources Manual or user-driven events ✅ Example: const subject = new Subject<number>();
subject.subscribe(val => console.log('A:', val));

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: Can you give examples? Directives are instructions in the DOM. They help Angular extend HTML's capabilities. Types of Directives:

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: Break down large components: Divide UI into smaller, reusable child components.

Explain a bit more

Use container/presentation pattern: Container components handle logic and data fetching. Presentation components are dumb, focus on UI. Move logic to services or state management. Avoid large inline templates and styles; use separate files. Use OnPush change detection strategy to optimize performance. Use reactive forms or observables to keep code clean.

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: The Angular compiler converts Angular templates and TypeScript code into efficient JavaScript code. There are two modes: JIT (Just-in-Time): Compilation happens in the browser at runtime. AOT (Ahead-of-Time): Compilation happens during the build phase, producing optimized JS files. It processes: Templates → render functions Metadata → static code to improve runtime Ivy compiler is the latest Angular compiler.

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: uthorization in Angular? Commonly done using: Login forms that send credentials to backend. Receive a token (usually JWT) to identify the user. Use Angular guards (like canActivate) to protect routes based on user roles. Store tokens securely (e.g., localStorage, sessionStorage, or cookies). Attach tokens to HTTP requests via HTTP… 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: TestBed is the primary API to configure and initialize the environment for unit testing Angular components and services. It allows you to declare components, provide services, import modules, and compile templates.

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 npm or yarn to install the package: npm install lodash If the library requires it, add typings: npm install --save-dev @types/lodash Some libraries have Angular-specific schematics that you can add via: ng add @angular/material This command installs and configures Angular Material automatically.

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: To use a module’s components/directives/pipes, import it in your module’s imports array. To make components/directives/pipes available to other modules, export them in your module’s exports array.

Example code

@NgModule({ imports: [CommonModule], exports: [MyComponent, MyDirective] }) export class SharedModule {} Then import SharedModule in any module where you want to use those components.

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? Common techniques: Use OnPush change detection. Implement trackBy in *ngFor. Use lazy loading for modules. Avoid heavy computations in templates. Use pure pipes for filtering/formatting. Use memoization to cache expensive function results. Detach change detector manually for rarely updated components. Use… ngZone.runOutsideAngular() for…

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: ✅

Example code

this.profileForm = new FormGroup({ firstName: new FormControl('', Validators.required), lastName: new FormControl(''), email: new FormControl('', [Validators.required, Validators.email]) }); <form [formGroup]="profileForm" (ngSubmit)="onSubmit()"> <input formControlName="firstName" /> <input formControlName="lastName" /> <input formControlName="email" /> <button type="submit">Submit</button> </form>

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: Use built-in validators via HTML attributes like required, minlength. Use Angular directives like #username="ngModel" to check validity. ✅

Example code

<input name="email" ngModel required email #email="ngModel" /> <div *ngIf="email.invalid && email.touched"> <small *ngIf="email.errors?.required">Email is required</small> <small *ngIf="email.errors?.email">Invalid email format</small> </div>

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.