Interview Q&A

• 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

});

}

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.

• 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

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

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

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

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

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

});

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

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: