Interview Q&A

• Angular Ivy is the Angular next-generation rendering engine and compiler

introduced officially in Angular 9.

• It improves:
• Bundle size: Smaller generated code via better tree shaking and code

generation.

• Build times: Faster incremental builds.
• Runtime performance: Faster rendering and change detection.
• Better debugging: More readable generated code and better error

messages.

• Ivy enables partial compilation and supports new features like locality principle

(compile only used components).

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.

wait TestBed.configureTestingModule({

declarations: [MyComponent]

}).compileComponents();

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

fixture.detectChanges();

});

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

expect(component).toBeTruthy();

});

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

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

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.

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

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.

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

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.

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

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.

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

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

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

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.

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.

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.