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.

• 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

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.

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.

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.

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

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.

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.

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

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

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.