Angular Interview Questions

A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates its content without reloading the entire page.

When a user navigates between different sections, Angular updates only the required components instead of requesting a completely new page from the server. This results in a faster and smoother user experience.

Examples include Gmail, Google Maps, Trello, and many modern dashboards.

Components are the fundamental building blocks of an Angular application. Every visible part of the user interface is represented by a component.

A component consists of:

• TypeScript class (logic)

• HTML template (view)

• CSS/SCSS file (styling)

Each component manages its own data and user interactions, making applications modular and easier to maintain.

@Component({
  selector: 'app-user',
  template: `<h2>{{name}}</h2>`
})

export class UserComponent{
  name = "Peter";
}

Output 
Peter

A module is a container that organizes related components, directives, pipes, and services.

Every Angular application has at least one module called the Root Module (AppModule). Large applications often use additional feature modules to keep the project organized.

Modules improve scalability by grouping related functionality together.

Directives are special instructions that modify the appearance or behavior of HTML elements.

Angular provides three types of directives:

• Component Directives

• Structural Directives

• Attribute Directives

Structural directives add or remove elements from the DOM, while attribute directives change the appearance or behavior of existing elements.

Some commonly used directives are:

• *ngIf

• *ngFor

• [ngClass]

• [ngStyle]

Data Binding is the process of synchronizing data between the component and the HTML template.

Angular supports four types of data binding:

• Interpolation

• Property Binding

• Event Binding

• Two-Way Binding

Data binding reduces manual DOM manipulation and keeps the UI synchronized with application data.

Services are classes that contain reusable business logic, API calls, or shared data that multiple components can use.

Instead of duplicating code across components, developers move common functionality into services.

Services are commonly used for:

• API Requests

• Authentication

• User Management

• Data Sharing

• Logging

• Utility Functions

Services are typically injected into components using Angular's Dependency Injection system.

Dependency Injection (DI) is a design pattern used by Angular to provide required objects automatically instead of creating them manually.

Lifecycle Hooks are methods that Angular calls automatically during different stages of a component's lifecycle.

Common hooks include:

• ngOnInit()

• ngOnChanges()

• ngDoCheck()

• ngAfterContentInit()

• ngAfterViewInit()

• ngOnDestroy()

These hooks allow developers to execute code when a component is created, updated, or destroyed.

ngOnInit(){

 console.log("Component Loaded");

}

Output 
Component Loaded

Angular Routing allows users to navigate between different components without reloading the entire page.

Routes map URL paths to components. When a user visits a URL, Angular Router loads the corresponding component dynamically.

Routing improves user experience by enabling smooth navigation within Single Page Applications.

RxJS (Reactive Extensions for JavaScript) is a library for working with asynchronous data streams. Angular uses RxJS extensively because many operations such as HTTP requests, user events, route changes, and WebSocket messages happen asynchronously.

Instead of waiting for data, Angular subscribes to an Observable and reacts whenever new data arrives.

RxJS helps developers:

• Handle asynchronous operations

• Combine multiple data streams

• Retry failed requests

• Cancel unnecessary requests

• Improve application responsiveness

import { of } from 'rxjs';

of("Angular").subscribe(data => {
  console.log(data);
});

Output 
Angular

An Observable is an object that emits data over time. Unlike a Promise, which returns only one value, an Observable can emit multiple values until it is completed or unsubscribed.

Angular uses Observables for:

• HTTP Requests

• Form Value Changes

• Route Parameters

• User Events

• WebSockets

Observables become active only when a component subscribes to them.

A Subject is a special type of Observable that can both emit and receive values.

Unlike a regular Observable, multiple components can subscribe to the same Subject and receive updates simultaneously.

Subjects are commonly used for:

• Component Communication

• Event Broadcasting

• Shared State

• Notifications

Reactive Forms provide a programmatic approach to handling forms.

Instead of defining form logic inside HTML, developers create the form structure in the TypeScript file using FormGroup and FormControl.

Reactive Forms provide:

• Better Validation

• Dynamic Forms

• Easier Testing

• Better Scalability

They are preferred for medium and large applications.

this.loginForm = new FormGroup({

email: new FormControl(''),

password: new FormControl('')

});

Output 
Reactive Form Created

Template-Driven Forms are forms where most of the logic is written directly inside the HTML template using Angular directives.

They are simpler to build and suitable for small applications or basic forms.

Angular automatically creates the form model behind the scenes using the ngModel directive.

Lazy Loading is a technique where Angular loads feature modules only when they are needed instead of loading the entire application at startup.

This reduces the initial bundle size and improves application loading speed.

Large applications commonly lazy load:

• Admin Module

• Dashboard Module

• Reports Module

• Settings Module

This results in faster initial page loads and better performance.

Route Guards control access to routes before Angular loads a component.

They help secure an application by checking conditions such as user authentication or permissions.

Common guards include:

• CanActivate

• CanDeactivate

• CanLoad

• CanMatch

• Resolve

A typical use case is preventing unauthenticated users from accessing the dashboard.

HTTP Interceptors allow developers to intercept and modify HTTP requests or responses before they reach the server or the application.

Interceptors are commonly used for:

• Adding JWT Tokens

• Logging Requests

• Error Handling

• Request Timing

• Global Headers

Since they execute automatically for every HTTP request, they eliminate repetitive code in services.