Interview Q&A

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.

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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

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

@NgModule({

imports: [CommonModule],

exports: [MyComponent, MyDirective]

})

export class SharedModule {}

Then import SharedModule in any module where you want to use those components.

pplications?

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.

✅ Example:

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>

• Use built-in validators via HTML attributes like required, minlength.
• Use Angular directives like #username="ngModel" to check validity.

✅ Example:

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

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

ngular?

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:

Examples:

<!-- *ngIf -->

<div *ngIf="user.isLoggedIn">Welcome, {{ user.name }}</div>

<!-- *ngFor -->

<li *ngFor="let item of items">{{ item }}</li>

Real-Time Example:

In a to-do app, *ngFor is used to loop through tasks and display them.

Answer: Directives are instructions in the DOM. They help Angular extend HTML's capabilities. Types of Directives:

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

• 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) }

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

• Developers must implement token handling in interceptors.

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

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

});

});

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

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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.

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

ngular reuses existing DOM elements instead of recreating them.

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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

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

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

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

@Output() myEvent = new EventEmitter<string>();

this.myEvent.emit('some data');

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

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.

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

• 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

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.

What interviewers expect

• A clear definition tied to Angular in Angular projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production Angular application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in Angular architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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:

constructor(private cd: ChangeDetectorRef) {}

updateData() {

this.data = fetchNewData();

this.cd.detectChanges(); // manually trigger update

}