Interview Q&A

• Modularize your code: Break your app into feature modules, shared modules, and

core modules.

• Follow Angular style guide: Use official Angular style recommendations for naming,

folder structure, and coding conventions.

• Separate concerns: Keep components, services, directives, pipes, and models in

separate folders.

• Use barrel files (index.ts): To simplify imports by exporting module contents

centrally.

• Use services for business logic: Avoid placing complex logic inside components;

delegate to services.

• Keep components small and focused: Each component should have a single

responsibility.

• Consistent naming conventions: For files and classes (e.g., user.service.ts

for services).

• Use interfaces for types: Define interfaces or models for data structures.

ng generate module admin --route admin --module app.module

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.

ng generate directive highlight

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

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.

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

pplications?

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

✅ Example:

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

}

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.

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
• Query parameters
• Route data
• Parent/child route info

✅ Example:

constructor(private route: ActivatedRoute) {}

ngOnInit() {

this.route.params.subscribe(params => {

this.productId = params['id'];

});

}

Name the different types of guards.

🔸 Route Guards:

Used to control access to certain routes or components.

Guard Type Purpose

canActivate Prevents unauthorized access to a route

canActivateCh

ild

Controls access to child routes

canDeactivate Confirms navigation away (e.g., unsaved

changes)

resolve Pre-loads route data before activating the route

canLoad Prevents lazy-loaded module from loading

✅ Example:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard]

}

ngular?

✅ Example Setup:

const routes: Routes = [

{

path: 'dashboard',

component: DashboardComponent,

children: [

{ path: 'analytics', component: AnalyticsComponent },

{ path: 'reports', component: ReportsComponent }

}

];

In Template:

<!-- dashboard.component.html -->

<router-outlet></router-outlet>

Nested components render inside the parent’s <router-outlet>.

would you use it?

canActivate is used to prevent access to a route based on conditions (like

uthentication).

✅ Use case:

Protect /admin route unless user is logged in.

✅ Implementation:

@Injectable({ providedIn: 'root' })

export class AuthGuard implements CanActivate {

constructor(private authService: AuthService, private router:

Router) {}

canActivate(): boolean {

if (!this.authService.isLoggedIn()) {

this.router.navigate(['/login']);

return false;
}
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

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

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.

n 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
• AppRoutingModule for navigation between login and dashboard

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

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.

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

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.

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

});

});

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.

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

• 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