Comprehensive Angular Interview

Questions and Answers

Basic Angular Questions

1. What is Angular?

Angular is a TypeScript-based open-source web application framework led by the

Angular Team at Google and by a community of individuals and corporations. It is a
complete rewrite from the same team that built AngularJS. Angular is a platform and
framework for building single-page client applications using HTML and TypeScript.

2. What are the key features of Angular?

• Component-based architecture
• TypeScript support
• Dependency Injection
• Templates
• Directives
• Pipes
• Forms (Template-driven and Reactive)
• HTTP Client
• Router
• Testing utilities
• Angular CLI
• Internationalization (i18n)
• Server-side rendering

3. What is the difference between AngularJS and Angular?

AngularJS (Angular 1.x) is the first version of Angular, while Angular refers to Angular 2
and all versions after it (2, 4, 5, ..., 17+).

Key differences: - AngularJS uses JavaScript, while Angular uses TypeScript - AngularJS
has a controller concept, Angular uses a component-based architecture - AngularJS uses
$scope for data binding, Angular has a more direct property binding - Angular has better
performance with improved change detection - Angular supports mobile development -
Angular has a more modular architecture
4. What is a component in Angular?

A component is a fundamental building block of an Angular application. It controls a

patch of screen called a view. Each component consists of: - A TypeScript class that
defines behavior - An HTML template that defines the view - CSS styles that define the
appearance

Components are decorated with the @Component decorator that provides metadata
about the component.

5. What is a module in Angular?

An Angular module, or NgModule, is a container for a cohesive block of code dedicated

to an application domain, a workflow, or a closely related set of capabilities. It can
contain components, service providers, and other code files whose scope is defined by
the NgModule. Every Angular app has at least one module, the root module
(conventionally named AppModule).

6. What is data binding in Angular?

Data binding is a mechanism that allows communication between a component and its
template. Angular supports four forms of data binding: - Interpolation: {{value}} - One-
way from component to view - Property binding: [property]="value" - One-way from
component to view - Event binding: (event)="handler()" - One-way from view to
component - Two-way binding: [(ngModel)]="property" - Two-way binding

7. What are directives in Angular?

Directives are classes that add additional behavior to elements in your Angular
applications. There are three kinds of directives in Angular: - Component directives -
directives with a template - Structural directives - change the DOM layout by adding and
removing DOM elements (e.g., ngIf, ngFor) - Attribute directives - change the appearance
or behavior of an element (e.g., ngClass, ngStyle)

8. What are pipes in Angular?

Pipes are simple functions that accept an input value and return a transformed value.
They can be used in templates to transform strings, currency amounts, dates, and other
data for display. Pipes are defined using the @Pipe decorator.

Examples of built-in pipes: - DatePipe: Formats a date value - UpperCasePipe:

Transforms text to uppercase - LowerCasePipe: Transforms text to lowercase -
CurrencyPipe: Transforms a number to a currency string - DecimalPipe: Transforms a
number into a string with a decimal point

9. What is dependency injection in Angular?

Dependency Injection (DI) is a design pattern in which a class requests dependencies

from external sources rather than creating them. Angular's DI framework provides
dependencies to a class upon instantiation. It helps to increase flexibility and modularity
in your application.

10. What is the Angular CLI?

The Angular Command Line Interface (CLI) is a command-line tool that you use to
initialize, develop, scaffold, and maintain Angular applications. It provides commands
for creating projects, generating code, testing, bundling, and deployment.

Intermediate Angular Questions

11. What are Angular services?

Services in Angular are singleton objects that get instantiated only once during the
lifetime of an application. They contain methods that maintain data throughout the life
of an application, i.e., data does not get refreshed and is available all the time. The main
objective of a service is to organize and share business logic, models, or data and
functions with different components of an Angular application.

12. What is the purpose of the @Injectable decorator?

The @Injectable decorator marks a class as available to be provided and injected as a

dependency. Any service that is going to be injected into a component or another service
needs to have the @Injectable decorator. It specifies that Angular can use this class in
the DI system.

13. Explain Angular routing.

Angular Router enables navigation from one view to the next as users perform
application tasks. It interprets a browser URL as an instruction to navigate to a client-
generated view, and passes optional parameters to the component to help it decide
what specific content to present.

Key features: - Path-based routing - Route parameters - Nested routes - Route guards -
Lazy loading - Route resolvers
14. What are template-driven forms in Angular?

Template-driven forms rely on directives in the template to create and manipulate the
underlying form object. They are useful for adding simple forms to an app, such as an
email list signup form. They're easy to add to an app, but they don't scale as well as
reactive forms.

15. What are reactive forms in Angular?

Reactive forms provide a model-driven approach to handling form inputs whose values
change over time. They are built around observable streams, where form inputs and
values are provided as streams of input values, which can be accessed synchronously.
They are more robust, scalable, reusable, and testable.

16. What are lifecycle hooks in Angular?

Lifecycle hooks are methods that get called at specific points in the lifecycle of a
component or directive. They give you the opportunity to act on a component or
directive instance at specific moments in its lifecycle.

The most commonly used lifecycle hooks are: - ngOnInit: Called once after the first
ngOnChanges - ngOnChanges: Called when an input property changes - ngDoCheck:
Called during every change detection run - ngAfterViewInit: Called after the component's
view has been initialized - ngOnDestroy: Called just before Angular destroys the
component

17. What is the difference between constructor and ngOnInit?

• Constructor: The constructor is a TypeScript feature and is called when a class is

instantiated. It's used mainly for dependency injection.
• ngOnInit: This is an Angular lifecycle hook that is called after Angular has initialized
all data-bound properties of a directive. It's the right place to fetch initial data for
the component.

18. What is the async pipe in Angular?

The async pipe subscribes to an Observable or Promise and returns the latest value it
has emitted. When a new value is emitted, the async pipe marks the component to be
checked for changes. When the component gets destroyed, the async pipe unsubscribes
automatically to avoid potential memory leaks.
19. How do you handle HTTP requests in Angular?

Angular provides a client HTTP API for Angular applications, the HttpClient service class
in @angular/common/http. HttpClient offers a simplified client HTTP API for Angular
applications that rests on the XMLHttpRequest interface exposed by browsers. It
includes testability features, typed request and response objects, request and response
interception, Observable APIs, and streamlined error handling.

20. What are RxJS Observables?

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using
Observables, to make it easier to compose asynchronous or callback-based code.
Observables provide support for passing messages between parts of your application.
They are used extensively in Angular for handling events, HTTP requests, and more.

Advanced Angular Questions

21. What is change detection in Angular?

Change detection is the process by which Angular checks to see whether your
application state has changed, and if any DOM needs to be updated. By default, Angular
uses a change detection strategy called "CheckAlways" which checks the entire
component tree for changes. However, you can use the OnPush strategy to improve
performance by only checking components when inputs have changed or events have
been triggered.

22. What is NgZone in Angular?

NgZone is a wrapper around Zone.js which helps Angular know when to trigger change
detection. Zone.js patches several low-level browser APIs (such as setTimeout,
addEventListener) to notify Angular when to update the UI. NgZone provides a way to
execute work inside or outside of the Angular zone.

23. What is AOT compilation?

Ahead-of-Time (AOT) compilation converts your Angular HTML and TypeScript code into
efficient JavaScript code during the build phase before the browser downloads and runs
that code. This results in faster rendering, fewer asynchronous requests, smaller Angular
framework download size, and earlier detection of template errors.
24. What is lazy loading in Angular?

Lazy loading is a technique in Angular that allows you to load JavaScript components
asynchronously when a specific route is activated. It helps to decrease the startup time
of your application by splitting it into multiple bundles and loading them on demand.

25. What is the difference between ViewChild and ContentChild?

• ViewChild: Gives access to elements in the template view of the component

• ContentChild: Gives access to elements that are projected into the component
from the outside (using )

26. What are Angular elements?

Angular elements are Angular components packaged as custom elements (also called
Web Components), a web standard for defining new HTML elements in a framework-
agnostic way. They allow Angular components to be used in non-Angular environments.

27. What is server-side rendering (SSR) in Angular?

Server-side rendering (Angular Universal) is a technique that allows your application to

render on the server rather than in the browser. This can help with SEO, improve
performance on mobile and low-powered devices, and show the first page quickly.

28. What is NgRx?

NgRx is a framework for building reactive applications in Angular. It provides state

management using Redux patterns, isolation of side effects, entity collection
management, router bindings, code generation, and developer tools that enhance
developer experience.

29. What are pure and impure pipes?

• Pure pipes: Execute only when Angular detects a pure change to the input value (a
change to a primitive input value or a changed object reference)
• Impure pipes: Execute during every component change detection cycle (potentially
multiple times per second)

30. How do you optimize Angular application performance?

• Use OnPush change detection strategy

• Lazy load modules
• Use pure pipes
 • Use trackBy with *ngFor
• Avoid complex computations in templates
• Use Web Workers for CPU-intensive tasks
• Enable production mode
• Use AOT compilation
• Minimize DOM manipulation
• Use server-side rendering for initial load
• Implement proper unsubscribing from Observables

31. What are Angular guards?

Angular route guards are interfaces which can tell the router whether or not it should
allow navigation to a requested route. They make routing decisions based on logic you
define in your guard service. There are five different types: - CanActivate: Controls if a
route can be activated - CanActivateChild: Controls if children of a route can be activated
- CanDeactivate: Controls if a user can leave a route - Resolve: Performs route data
retrieval before route activation - CanLoad: Controls if a module can be loaded lazily

32. What is the difference between promises and observables?

• Promises:
• Provide a single future value
• Not cancellable
• Handle a single event

• Eager execution (execute immediately when created)

• Observables:

• Can provide multiple values over time

• Cancellable through unsubscribe
• Support operators like map, filter, reduce, etc.
• Lazy execution (execute only when subscribed to)

33. What are Angular schematics?

Schematics are templates that follow a schematic implementation and are defined in a
collection. They can be packaged into an npm package and installed. The Angular CLI
uses schematics to generate and modify projects and their parts.
34. What is content projection in Angular?

Content projection is a pattern in which you insert, or project, the content you want to
use inside another component. For example, you could have a Card component that
accepts content provided by another component using the element.

35. What are dynamic components in Angular?

Dynamic components are components created and inserted into the application at
runtime rather than at compile time. Angular provides the ComponentFactoryResolver
to create components dynamically.

36. What is the Angular Ivy renderer?

Ivy is the code name for Angular's next-generation compilation and rendering pipeline. It
allows for smaller bundle sizes, faster compilation, better debugging, and improved type
checking. It's the default rendering engine in Angular since version 9.

37. How do you implement internationalization (i18n) in Angular?

Angular provides built-in internationalization (i18n) tools to help you make your app
available in multiple languages. The process involves: 1. Marking text in templates for
translation 2. Creating translation files 3. Building and serving localized versions of your
app

38. What are Angular libraries and how do you create one?

Angular libraries are a way to create reusable Angular components, services, and
modules that can be imported into Angular applications. You can create a library using
the Angular CLI with the command ng generate library my-lib .

39. What is the Angular TestBed?

TestBed is the primary API for writing unit tests for Angular applications and libraries. It
creates a dynamically-constructed Angular test module that emulates an Angular
@NgModule. TestBed provides methods for creating components, handling injection,
and more in a test environment.
40. What are Angular directives and how do you create a custom
directive?

Directives are classes that add additional behavior to elements. To create a custom
directive:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
@Input() appHighlight: string;

constructor(private el: ElementRef) {}

ngOnInit() {
this.el.nativeElement.style.backgroundColor = this.appHighlight || 'yellow';
}
}

Latest Angular Features (Angular 17+)

41. What are the new features in Angular 17?

Angular 17 introduced several new features: - New control flow syntax (@if, @for,
@switch) - Deferrable views for lazy loading components - Improved server-side
rendering with hydration - Standalone components as the default - Improved developer
experience with better error messages - Signal-based reactivity system improvements -
Faster builds and smaller bundles

42. What are Angular Signals?

Signals are a new reactive primitive introduced in Angular 16+ that represent values that
change over time. They provide a way to explicitly track how and when state changes
flow through your application. Signals offer fine-grained reactivity and better
performance compared to traditional change detection.

import { signal, computed } from '@angular/core';

// Create a signal with an initial value

const count = signal(0);

// Create a computed signal that depends on other signals

 const doubleCount = computed(() => count() * 2);

// Update the signal value

count.set(5);
// or
count.update(value => value + 1);

43. What is the new control flow syntax in Angular 17?

Angular 17 introduced a new, more efficient control flow syntax that replaces NgIf,
NgFor, and NgSwitch directives:

<!-- New @if syntax -->

@if (user.isAdmin) {
<admin-dashboard />
} @else if (user.isEditor) {
<editor-dashboard />
} @else {
<user-dashboard />
}

<!-- New @for syntax -->

@for (item of items; track item.id) {
<div>{{ item.name }}</div>
} @empty {
<div>No items found</div>
}

<!-- New @switch syntax -->

@switch (status) {
@case ('loading') {
<loading-spinner />
}
@case ('error') {
<error-message />
}
@default {
<user-profile />
}
}

44. What are deferrable views in Angular 17?

Deferrable views allow you to lazy load components and defer their rendering until
certain conditions are met. This helps improve initial load performance by only loading
what's immediately needed.
 @defer {
<heavy-component />
} @loading {
<p>Loading...</p>
} @error {
<p>Error loading component</p>
} @placeholder {
<p>Placeholder content</p>
}

Triggers for deferrable views include: - on idle: Load when the browser is idle - on
viewport: Load when the element enters the viewport - on interaction: Load when the
user interacts with a trigger element - on hover: Load when the user hovers over a trigger
element - on timer: Load after a specified time

45. What is hydration in Angular?

Hydration is a technique that allows a server-rendered application to reuse the DOM

generated on the server instead of rebuilding it on the client. This results in faster page
loads and better user experience. Angular 17 improved the hydration process, making it
more reliable and efficient.

46. What are standalone components in Angular?

Standalone components are components that don't need to be declared in an

NgModule. They were introduced to simplify the Angular mental model and reduce the
need for NgModules in many cases. In Angular 17, standalone components became the
default when generating new components.

import { Component } from '@angular/core';

import { CommonModule } from '@angular/common';

@Component({
selector: 'app-user',
standalone: true,
imports: [CommonModule],
template: `<h1>User Profile</h1>`
})
export class UserComponent {}
47. What is the difference between ViewEncapsulation.Emulated and
ViewEncapsulation.ShadowDom?

• ViewEncapsulation.Emulated: Angular modifies the component's CSS selectors to

effectively scope them to the component's view. This is the default encapsulation
strategy.
• ViewEncapsulation.ShadowDom: Angular uses the browser's native Shadow DOM
API to encapsulate the component's view. This provides stronger encapsulation but
may not be supported in all browsers.

48. What are Angular Signals and how do they differ from RxJS
Observables?

Signals are a new reactive primitive in Angular that represent values that change over
time. Unlike RxJS Observables, Signals: - Are synchronous and pull-based (you read the
current value) - Have simpler API with less operators - Are designed specifically for UI
state management - Integrate directly with Angular's rendering system - Have lower
overhead for simple state changes

49. What is the Angular DevTools extension?

Angular DevTools is a browser extension for debugging and profiling Angular

applications. It provides features like: - Component explorer to inspect the component
tree - Profiler to analyze change detection performance - Router tree visualization - NgRx
state inspector - Directive explorer

50. How do you implement micro frontends with Angular?

Micro frontends architecture allows multiple teams to work on a single frontend

application independently. With Angular, you can implement micro frontends using: -
Module Federation (Webpack 5 feature) - Angular Elements (Web Components) - Iframe-
based integration - Server-side composition

Each approach has different trade-offs regarding isolation, performance, and

complexity.