Interview Q&A

• The Angular CLI (Command Line Interface) is a tool to generate, build, test, and

maintain Angular apps efficiently.

• It automates repetitive tasks and enforces best practices.
• You can create a new Angular app with:

ng new my-angular-app

• This command scaffolds a complete Angular project with all necessary files and

configurations.

ngular is a TypeScript-based open-source front-end web application framework

developed by Google for building single-page applications (SPAs).

Key Differences:

Feature AngularJS (v1.x) Angular (2+)

Language JavaScript TypeScript

rchitecture MVC (Model-View-Controller) Component-based

Mobile Support No Yes

Performance Slower due to two-way binding Faster with unidirectional data

flow

Dependency

Injection

Limited Robust and built-in

Real-Time Example:

• AngularJS was used in legacy projects (e.g., dashboards in older admin panels).
• Angular is used in modern SPAs like Google Ads, Gmail, Netflix dashboards, etc.

• An Angular Module (NgModule) is a container to group related components,

directives, pipes, and services.

• It organizes an Angular app into cohesive blocks of functionality.
• Helps with code organization, compilation, dependency injection, and lazy

loading.

• Every Angular app has at least one root module (AppModule).

wait TestBed.configureTestingModule({

declarations: [MyComponent]

}).compileComponents();

fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;

fixture.detectChanges();

});

it('should create component', () => {

expect(component).toBeTruthy();

});

pplication's state changes. When data-bound properties change, Angular runs a change

detection cycle to check if the view needs updating.

• It checks component data and updates the UI accordingly.
• Happens automatically after events, HTTP requests, timers, etc.

ngular applications.

• Instead of rendering the app purely in the browser (client-side), the initial HTML is

rendered on the server and sent to the client.

• Improves SEO because search engines get fully rendered HTML content

immediately, which they can index better.

• Also improves perceived performance and faster first paint.

pproach Declarative, based on directives in

template

Programmatic, model-driven in

TypeScript

Form Setup 	Mostly in HTML template 	Mostly in TypeScript code

Validation Simple, template-based More powerful, reactive & scalable

Form Control 	Implicitly created by Angular 	Explicitly created and managed

Scalability Suitable for simple forms Best for complex forms

Change

Detection

synchronous Synchronous

Testing Harder to test Easier to unit test

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.

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

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.

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

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

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.

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

@NgModule({

declarations: [MyComponent, MyDirective],

imports: [CommonModule],

exports: [MyComponent]

})

export class MyModule {}

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.

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

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

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

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.

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

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

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

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.

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

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.

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.

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

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

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.

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

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.

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.

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

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

});

});

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

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.

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

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.

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.

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.

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.

• 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

ngular has a built-in DI system that allows services to be injected into components or other

services.

Example:

constructor(private authService: AuthService) {}

Real-Time Example:

In an e-commerce app:

• Inject CartService into CartComponent to manage cart items.

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

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

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

}

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.

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

null;

};

}

// Usage:

new FormControl('', [forbiddenNameValidator(/admin/i)])

• Lazy loading delays loading feature modules until the user navigates to their route.
• Implemented with the router using loadChildren and dynamic imports.

Example:

const routes: Routes = [

{

path: 'admin',

loadChildren: () => import('./admin/admin.module').then(m =>

m.AdminModule)

}

];

This reduces initial bundle size and improves app startup time.

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.

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.

pplications?

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

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:

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

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

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

});

}

• 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']);

}));

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

RouterModule.forRoot(routes) // for root app routing

RouterModule.forChild(childRoutes) // for feature module routing

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

component is the building block of Angular apps. Each component controls a part of

the UI.

component includes:

• TypeScript class
• HTML template
• CSS styles

Example:

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

Answer: navigateByUrl() navigates to a given absolute URL string. Example: this.router.navigateByUrl('/home'); Unlike navigate(), it takes a URL string instead of an array of commands. Useful when you want to navigate based on a URL, not commands.

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

ngular Module System

Answer: Pipes transform data in templates. Used with the pipe | operator. Angular provides built-in pipes like date, currency, uppercase, async, etc. Example: &lt;p&gt;{{ birthday | date:'longDate' }}&lt;/p&gt;

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 HttpClientTestingModule and HttpTestingController to mock and

control HTTP requests.

Example:

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

});

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

• 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 + '!!!';
}
}

Use in template:

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

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

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.

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

• Can also use HTTP interceptors to catch API errors.

Answer: Validators provides built-in validators like required, minLength, maxLength, email. ✅ Example: new FormControl('', [Validators.required, Validators.email])

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

component from a parent.

Example:

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

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

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 modules (NgModules) are containers that group related components, directives,

pipes, and services.

Purpose:

• Organize code
• Enable lazy loading
• Manage dependencies

Example:

@NgModule({

declarations: [LoginComponent],

imports: [CommonModule, FormsModule],

exports: [LoginComponent]

})

export class AuthModule {}

Real-Time Example:

• AuthModule for login and registration
• AdminModule for dashboard, user management

ngular projects?

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

ngular 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

ngular.json CLI workspace/project configuration

Custom Builder Extend Angular CLI build/serve functionality

OT Compilation Compile templates ahead-of-time for faster

startup

tsconfig.json TypeScript compiler options for Angular project

Testing Angular Applications

• Angular uses the fileReplacements option in angular.json.
• You create environment files like environment.ts and environment.prod.ts.
• During build, Angular replaces the environment file based on the target configuration.

Example in angular.json:

"configurations": {

"production": {

"fileReplacements": [

{

"replace": "src/environments/environment.ts",

"with": "src/environments/environment.prod.ts"

}

}
}

• Allows different API endpoints, debug flags, or configurations per environment.

Best Practices

FormBuilder helps create form controls/groups/arrays with less boilerplate.

✅ Example:

constructor(private fb: FormBuilder) {}

this.profileForm = this.fb.group({

firstName: ['', Validators.required],

lastName: [''],

email: ['', [Validators.required, Validators.email]]

});

• *ngIf supports an else clause to show alternative template when condition is false.
• Use <ng-template> for the else block.

Example:

<div *ngIf="isLoggedIn; else loginPrompt">

Welcome back!

</div>

<ng-template #loginPrompt>

Please log in.

</ng-template>

Answer: E2E testing verifies the entire application flow in a real browser environment. Tests user interactions and integration between components and backend. Ensures app works as expected from a user's perspective.

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

Common Commands:

ng new my-app # Create new Angular project

ng serve # Run development server

ng generate component login # Generate component

ng build # Build for production

ng test # Run unit tests

Real-Time Example:

In a company, developers use ng generate component invoice to create a new

invoice component with all required files.

ngular Components & Templates

The @Component decorator defines a component in Angular. It tells Angular how to create

nd display the component by providing metadata such as the selector, template, and

styles.

✅ Example:

@Component({

selector: 'app-user-card',

templateUrl: './user-card.component.html',

styleUrls: ['./user-card.component.css']

})

export class UserCardComponent {}

📌 Real-Time Example:

In a CRM app, @Component({ selector: 'app-customer' }) is used to define a

reusable customer display card.

the different types.

Data binding connects the component's class logic with its template (HTML).

✳ Types of Data Binding:

Type Syntax Description

Interpolation 	{{ value }} 	Bind component data to HTML

Property Binding [property]="val

ue"

Bind DOM properties to component

Event Binding (event)="handle

r()"

Bind DOM events to component methods

Two-Way Binding [(ngModel)]="va

lue"

Sync data both ways (input ↔

component)

✅ Example:

<!-- Interpolation -->

<h1>{{ title }}</h1>

<!-- Property Binding -->

<input [value]="name" />

<!-- Event Binding -->

<button (click)="greetUser()">Greet</button>

<!-- Two-Way Binding -->

<input [(ngModel)]="username" />

in templates?

• *ngIf: Conditionally includes or removes an element.
• *ngFor: Iterates over a list and renders template for each item.

✅ Example:

<!-- *ngIf -->

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

<!-- *ngFor -->

<ul>

<li *ngFor="let product of products">{{ product.name }}</li>

</ul>

📌 Real-Time Example:

E-commerce product list: *ngFor displays product cards dynamically.

ngular?

➤ Parent to Child: Use @Input()

// child.component.ts

@Input() userData: any;

<!-- parent.component.html -->

<app-child [userData]="user"></app-child>

➤ Child to Parent: Use @Output() + EventEmitter

// child.component.ts

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

this.notify.emit('Hello Parent!');

<!-- parent.component.html -->

<app-child (notify)="handleNotification($event)"></app-child>

📌 Real-Time Example:

• Pass user object to UserCardComponent via @Input.
• Emit "user clicked" event back to parent with @Output.

describe them.

Lifecycle hooks are methods that Angular calls at specific stages of a component's

existence.

🌀 Common Lifecycle Hooks:

Hook Description

ngOnInit Called once after component is initialized

ngOnChanges Called when input properties change

ngDoCheck Called during every change detection

ngAfterViewI

nit

Called after component’s view has been initialized

ngOnDestroy Cleanup just before the component is destroyed

ngOnChanges() is called whenever an @Input() property changes in the component.

✅ Example:

@Input() user: User;

ngOnChanges(changes: SimpleChanges) {

console.log('User changed:', changes.user.currentValue);

}

📌 Real-Time Example:

When a new user is selected in a dashboard, ngOnChanges() updates the user detail card

dynamically.

do you implement it?

Two-way data binding means synchronizing the view and the component model

utomatically.

✅ Syntax:

<input [(ngModel)]="username" />

Requires importing FormsModule.

📌 Real-Time Example:

In a login form, updating the email input field updates the email property in the component

instantly.

ngular provides two ways:

➤ Template-Driven Forms:

Use ngModel, required, etc.

<form #form="ngForm">

<input name="email" [(ngModel)]="email" required />

<div *ngIf="form.controls.email?.invalid">Email is required.</div>

</form>

➤ Reactive Forms:

Use FormGroup, FormControl, and Validators.

form = new FormGroup({

email: new FormControl('', [Validators.required,

Validators.email])

});

📌 Real-Time Example:

Login or signup forms showing real-time validation messages.

Use Reactive Forms to generate controls at runtime.

✅ Example:

form: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {

this.form = this.fb.group({});

this.questions.forEach(q => {

this.form.addControl(q.key, new FormControl(''));

});

}

📌 Real-Time Example:

Survey builder where form fields change based on user selections.

be used?

ngModel is a directive that enables two-way data binding in template-driven forms.

✅ Example:

<input [(ngModel)]="name" />

Use it when:

• Working with template-driven forms
• Simple input binding is sufficient

Must import FormsModule.

📌 Real-Time Example:

Live search input field using [(ngModel)]="searchQuery" for filtering products.

ngular Directives

ttribute directives in Angular?

➤ Structural Directives:

• Change the structure/layout of the DOM by adding or removing elements.
• Prefix: * (e.g., *ngIf, *ngFor)

Examples:

• *ngIf – conditionally includes elements
• *ngFor – loops over data to render elements
• *ngSwitch – conditionally renders one view out of many

➤ Attribute Directives:

• Change the appearance or behavior of an existing DOM element or component.

Examples:

• ngClass – dynamically sets CSS classes
• ngStyle – sets inline styles dynamically
• Custom highlight directive (e.g., change color on hover)

✅ Real-Time Analogy:

• Structural: Like building or removing walls in a house (changes structure).
• Attribute: Like painting the walls (changes appearance only).

directives in Angular?

➤ *ngIf: Conditionally displays content

<div *ngIf="isLoggedIn">Welcome!</div>

➤ *ngFor: Iterates over a list

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

➤ ngSwitch: Selectively renders based on a condition

<div [ngSwitch]="status">

<p *ngSwitchCase="'active'">Active</p>

<p *ngSwitchCase="'inactive'">Inactive</p>

<p *ngSwitchDefault>Unknown</p>

</div>

ngular?

➤ Steps:

• NgZone monitors async operations (like promises, timers) and triggers Angular’s

change detection automatically after they complete.

• It helps Angular know when to update the UI.
• You can run code outside Angular’s zone to avoid unnecessary change detection,

improving performance.

• Protractor is built on WebDriverJS for Angular E2E tests.
• Write test specs using Jasmine syntax.
• Run tests against a running Angular app.

Example test:

describe('App E2E Test', () => {

it('should display welcome message', () => {

browser.get('/');

expect(element(by.css('h1')).getText()).toEqual('Welcome');

});

});

Run with:

ng e2e

• Offload heavy computations or tasks to:
• Web Workers to run in background threads.
• ngZone.runOutsideAngular() to prevent triggering change detection

unnecessarily.

• Use RxJS operators like debounce, throttle to optimize async streams.
• Break large tasks into smaller chunks.

Miscellaneous Angular Concepts

ngular?

• Test form validity by setting control values and checking validity state.

Example:

it('should mark form invalid when empty', () => {

component.form.controls['email'].setValue('');

expect(component.form.valid).toBeFalse();

});

it('should mark form valid with correct email', () => {

component.form.controls['email'].setValue('test@example.com');

expect(component.form.valid).toBeTrue();

});

dvanced Angular Topics