Curated top Angular interview questions with high quality answers for acing your front end interviews.
Thanks to Michal Grzegorczyk for feedback and proofreading.
-
Angular is a modern, open-source framework developed by Google for building large-scale, single-page applications (SPAs) primarily using TypeScript. It follows a component-based architecture and provides a comprehensive set of tools and features for development, including routing, forms, state management, and testing utilities.
Angular is a complete rewrite of its predecessor, AngularJS (version 1.x), and is not backward compatible. The key differences include:
- Architecture: Angular uses a component-based structure, while AngularJS used MVC/MVVM patterns with controllers and scopes.
- Language: Angular is built with and strongly encourages TypeScript, whereas AngularJS was primarily JavaScript.
- Performance: Angular offers significantly improved performance due to features like Ahead-of-Time (AoT) compilation and a more efficient change detection mechanism.
- Mobile Support: Angular was designed with mobile development in mind from the start.
- CLI: Angular includes a powerful command-line interface (CLI) for scaffolding, building, and testing applications, which was not a built-in feature of AngularJS.
Try out Angular coding questions on GreatFrontEnd.
-
An Angular application starts execution from the
main.tsfile, which bootstraps the root module, typicallyAppModule. This module declares and imports other modules and components needed for the application. The root module then bootstraps the root component, usuallyAppComponent.Components are the building blocks of an Angular application, consisting of a TypeScript class for logic, an HTML template for the view, and CSS styles. Angular uses data binding to synchronize data between the component class and its template.
Angular's compiler processes the application code (TypeScript, HTML, CSS) during the build process, often using Ahead-of-Time (AOT) compilation to produce optimized JavaScript bundles. When the application runs in the browser, Angular takes control of the specified root element in
index.html, renders the root component's template, and manages updates to the DOM based on changes detected in the application state. Dependency injection is used throughout the application to provide services and other dependencies to components and services.
Try out Angular coding questions on GreatFrontEnd.
-
The Angular CLI (Command Line Interface) is a powerful tool used to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. Its main purpose is to automate common development tasks, enforce best practices, and standardize the project structure, significantly boosting developer productivity.
You use commands like:
ng new my-app: Creates a new Angular projectng generate component my-component: Generates code for a new componentng serve: Builds and serves the application locally for developmentng build: Compiles the application for deploymentng test: Runs unit tests
It helps you quickly set up projects, add features, run tests, and build for production without manual configuration.
Try out Angular coding questions on GreatFrontEnd.
-
Angular components are the fundamental building blocks of an Angular application. They control a patch of the screen called a view. Every component consists of three main parts:
- A template, which is the HTML that defines the component's view
- A class, written in TypeScript, which contains the data and logic for the view
- Metadata, defined by the
@Componentdecorator, which tells Angular how to process the class and template, linking them together and defining things like the component's selector (how it's used in other templates) and styles
Components encapsulate their logic, data, and view, making them reusable and testable units. An Angular application is essentially a tree of nested components.
Try out Angular coding questions on GreatFrontEnd.
-
An
NgModuleis a class decorated with@NgModulethat defines a module in Angular. It acts as a container for a cohesive block of functionality, grouping related components, directives, pipes, and services.Its primary purposes are to:
- Organize application code into logical units
- Configure the Angular compiler to process components and templates
- Configure the injector to make services available for dependency injection
- Control the visibility of components, directives, and pipes to other modules
Key properties within the
@NgModuledecorator include:declarations: Lists components, directives, and pipes that belong to this moduleimports: Lists otherNgModules whose exported classes are needed by components in this moduleproviders: Lists services that the injector should create and make availableexports: Lists components, directives, and pipes fromdeclarations(or modules fromimports) that other modules can use
While standalone components (available from Angular 14 onwards) reduce the need for
declarationsandexportswithinNgModules, modules are still used for grouping imports and providing services.
Try out Angular coding questions on GreatFrontEnd.
-
In Angular, templates are HTML fragments that define the structure and appearance of a component's view. They are essentially standard HTML enhanced with Angular-specific syntax, allowing you to dynamically display data, respond to user input, and conditionally render elements. Each component is associated with a template, either defined inline using the
templateproperty or in a separate file usingtemplateUrl. Angular compiles these templates to render the component's UI in the browser.
Try out Angular coding questions on GreatFrontEnd.
-
In Angular, metadata or annotations are used to configure classes, telling Angular how they should be processed, used, or behave. They are attached to classes using decorators, which are special functions prefixed with the
@symbol.For example:
- The
@Componentdecorator adds metadata to a class, specifying its selector, template, styles, etc. - The
@Injectabledecorator adds metadata, indicating that a class can be injected as a dependency. - The
@NgModuledecorator adds metadata to configure a module, listing its declarations, imports, providers, and bootstrap components.
This metadata is crucial for Angular's compiler and runtime to understand the structure and dependencies of your application.
Try out Angular coding questions on GreatFrontEnd.
- The
-
Decorators in Angular are special kinds of declarations that can be attached to classes, methods, properties, or parameters. They are a TypeScript feature that provides a way to add metadata to code elements. Angular uses decorators extensively to configure classes and their members, telling Angular how they should be processed, instantiated, or interacted with.
For example:
@Componenttells Angular that a class is a component and provides configuration like its template, styles, and selector.@Injectabletells Angular that a class can be injected into other classes, making it part of the dependency injection system.@Inputmarks a property as an input binding, allowing data to flow into a component from its parent.@Outputmarks a property as an output binding, allowing a component to emit events to its parent.
Essentially, decorators are Angular's way of adding configuration and behavior hints directly within the code structure.
Try out Angular coding questions on GreatFrontEnd.
-
Directives in Angular are classes that add behavior to elements in your application. They allow you to manipulate the DOM, change the appearance of elements, or modify their structure.
There are three main types of directives:
- Component directives: These are directives with a template. They are the most common type and are essentially custom HTML elements with associated logic and rendering.
- Structural directives: These directives change the DOM layout by adding, removing, or manipulating elements. They are typically prefixed with an asterisk (
*). Examples include*ngIf,*ngFor, and*ngSwitch. - Attribute directives: These directives change the appearance or behavior of an existing element, component, or another directive. They are applied as attributes to elements. Examples include
NgClass,NgStyle, and custom attribute directives you create.
Try out Angular coding questions on GreatFrontEnd.
-
In Angular, both components and directives are classes decorated with metadata that interact with the DOM. The key difference is their purpose and structure.
- A component is a special type of directive that always has a template. It's used to create reusable UI blocks with their own view, logic, and encapsulated styles. You declare it using the
@Componentdecorator. - A directive modifies the behavior or appearance of an existing DOM element, component, or another directive. It does not have a template or encapsulated styles of its own. You declare it using the
@Directivedecorator.
Think of components as building blocks for your UI, while directives are tools to enhance or change those blocks or other elements.
Try out Angular coding questions on GreatFrontEnd.
- A component is a special type of directive that always has a template. It's used to create reusable UI blocks with their own view, logic, and encapsulated styles. You declare it using the
-
The key components in an Angular application are:
- Modules (
NgModule): These organize your application into cohesive blocks of functionality. Every Angular app has at least one root module, typicallyAppModule. Modules declare which components, directives, and pipes belong to them and make services available. - Components (
@Component): These are the fundamental building blocks of the user interface. Each component controls a patch of the screen and consists of a TypeScript class with application logic, an HTML template that defines the view, and CSS styles. - Templates: Written in HTML, templates define the structure and layout of a component's view. They use Angular's template syntax for data binding and directives.
- Metadata: This tells Angular how to process a class. It's attached using decorators like
@Component,@NgModule, and@Injectable. Metadata configures the class, linking a component class to its template and styles, or defining a module's imports and declarations. - Data Binding: This is the communication mechanism between a component's class and its template. It allows data to flow from the class to the template (interpolation, property binding) and from the template to the class (event binding), as well as two-way binding.
- Directives (
@Directive): These are classes that modify the DOM. Components are a special type of directive with a template. Other directives likeNgIfandNgForchange the structure of the DOM, while attribute directives change the appearance or behavior of an element. - Services (
@Injectable): These are classes that contain reusable logic or data. They are typically used for tasks like fetching data, logging, or providing shared state. Services are designed to be injected into components or other services using Dependency Injection. - Dependency Injection (DI): This is a core design pattern used by Angular to provide instances of dependencies (like services) to classes that need them, rather than the classes creating the dependencies themselves. This makes components and services easier to test and manage.
Try out Angular coding questions on GreatFrontEnd.
- Modules (
-
The
constructoris a standard TypeScript/JavaScript class feature used to initialize class members and perform dependency injection in Angular. It runs first when an instance of the class is created.ngOnInitis an Angular lifecycle hook that runs after the constructor and after Angular has initialized all data-bound properties (like@Input()s). It's the recommended place for most initialization logic in Angular components and services, such as fetching initial data or setting up subscriptions, because you can be sure that inputs are available.In short:
constructor: Basic class setup, dependency injectionngOnInit: Angular-specific initialization, access to inputs
The order is always
constructor->ngOnInit.import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-example', template: '<p>{{ message }}</p>', }) export class ExampleComponent implements OnInit { @Input() initialMessage: string = ''; message: string = ''; constructor() { console.log('Constructor called'); // initialMessage is NOT guaranteed to be available here console.log('initialMessage in constructor:', this.initialMessage); // Might be undefined } ngOnInit() { console.log('ngOnInit called'); // initialMessage IS guaranteed to be available here console.log('initialMessage in ngOnInit:', this.initialMessage); // Will have the input value this.message = this.initialMessage || 'Default message'; } }
Try out Angular coding questions on GreatFrontEnd.
-
Angular components have a lifecycle managed by Angular itself. As the component is created, updated, and destroyed, Angular calls specific methods on the component class at predefined moments. These methods are called lifecycle hooks.
The most common hooks, in their typical execution order, are:
ngOnChanges: Called when input properties changengOnInit: Called once after the component is initialized and its inputs are setngDoCheck: Called during every change detection runngAfterContentInit: Called after content projected into the component's view is initializedngAfterContentChecked: Called after the projected content has been checkedngAfterViewInit: Called after the component's view and its child views are initializedngAfterViewChecked: Called after the component's view and its child views have been checkedngOnDestroy: Called just before the component is destroyed
You implement a hook by declaring a method with the corresponding name on your component class and optionally implementing the associated interface (e.g.,
OnInit).
Try out Angular coding questions on GreatFrontEnd.
-
Interpolation is a one-way data binding technique in Angular that allows you to display data from your component class directly within your HTML template. It uses double curly braces
{{ }}to embed expressions. Angular evaluates the expression inside the braces and converts the result to a string, which is then inserted into the HTML at that location. It's primarily used to display component property values, results of simple calculations, or function calls. Angular automatically sanitizes the output to prevent cross-site scripting (XSS) attacks.
Try out Angular coding questions on GreatFrontEnd.
-
A template reference variable is a way to get a reference to a DOM element, a component instance, a directive instance, or an
NgTemplateOutletwithin your Angular template. You declare it using the hash symbol (#) followed by a variable name, like#myInput.Once declared, you can use this variable anywhere within the same template to interact with the referenced item. For example, you can get the value of an input field (
#myInput.value), call a method on a component instance (#myComponent.someMethod()), or access properties of a directive.To access a template reference variable from the component class code (e.g., in a method), you use the
@ViewChilddecorator.<input #nameInput type="text" /> <button (click)="logInput(nameInput.value)">Log Value</button> <my-component #childComponent></my-component> <button (click)="callChildMethod(childComponent)">Call Child Method</button>
import { Component, ViewChild, ElementRef } from '@angular/core'; import { MyComponent } from './my.component'; // Assuming MyComponent exists @Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { // Accessing the input element @ViewChild('nameInput') nameInputRef!: ElementRef; // Accessing the component instance @ViewChild('childComponent') childComponentRef!: MyComponent; logInput(value: string): void { console.log('Input value:', value); // Or using @ViewChild: // console.log('Input value from ViewChild:', this.nameInputRef.nativeElement.value); } callChildMethod(child: MyComponent): void { // Using the variable directly from the template context child.someMethod(); // Or using @ViewChild: // this.childComponentRef.someMethod(); } }
Try out Angular coding questions on GreatFrontEnd.
-
In Angular templates, you handle events using event binding syntax, which looks like
(eventName)="statement". TheeventNameis typically a standard DOM event likeclick,input, orsubmit, but it can also be a custom event emitted by a component using@Output. Thestatementis a template statement that Angular executes when the event occurs, usually involving calling a method defined in the component class. You can access the event payload using the$eventvariable within the statement.For example, to handle a button click:
<button (click)="saveData()">Save</button>
To get the input value from an input field:
<input (input)="onInput($event)" />
And in the component class:
import { Component } from '@angular/core'; @Component({ selector: 'app-my-component', templateUrl: './my-component.html', }) export class MyComponent { saveData() { console.log('Data saved!'); } onInput(event: Event) { const inputElement = event.target as HTMLInputElement; console.log('Input value:', inputElement.value); } }
Try out Angular coding questions on GreatFrontEnd.
-
In Angular, the bootstrapping module is the root module of your application, typically named
AppModule. It's the starting point that Angular uses to launch your application.It's configured using the
@NgModuledecorator and must include abootstraparray within its metadata. This array lists the components that Angular should bootstrap when the module is bootstrapped. For the root module, this array usually contains just one component, the root component (e.g.,AppComponent), which is the first component rendered in the browser's DOM.The actual bootstrapping process is initiated in the application's entry file, usually
main.ts, by callingplatformBrowserDynamic().bootstrapModule(AppModule). This tells Angular to load and initialize theAppModuleand then render the components listed in itsbootstraparray.
Try out Angular coding questions on GreatFrontEnd.
-
An Angular service is a class used to encapsulate logic, data fetching, or shared functionality that isn't directly tied to the user interface. They promote separation of concerns, making your code more modular, reusable, and testable.
You typically create a service using the Angular CLI:
ng generate service data
This command creates a class decorated with
@Injectable(). The@Injectable()decorator marks the class as a potential target for dependency injection and, when used withprovidedIn: 'root', makes the service a singleton available throughout your application. You then inject the service into components or other services that need to use its functionality via their constructors.
Try out Angular coding questions on GreatFrontEnd.
-
Dependency Injection (DI) is a design pattern where a class receives its dependencies from an external source rather than creating them itself. In Angular, it's a core mechanism used to provide instances of services or other objects to components, directives, pipes, and other services.
The main benefits are:
- Testability: Easily swap real dependencies with mock versions for testing
- Maintainability: Reduces coupling between classes
- Modularity: Makes components and services more reusable
Angular's DI system works with:
- Injectors: Containers that hold and manage instances of dependencies
- Providers: Configure how an injector should create an instance of a dependency
- Dependencies: The objects or services that a class needs
You typically inject dependencies into a class's constructor using the
@Injectable()decorator on the dependency and type hinting:import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', // Makes the service a singleton available throughout the app }) export class DataService { getData() { /* ... */ } }
import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ /* ... */ }) export class MyComponent { constructor(private dataService: DataService) { // dataService is now an instance provided by Angular's DI } }
Angular handles creating the
DataServiceinstance and providing it toMyComponent's constructor based on the provider configuration.
Try out Angular coding questions on GreatFrontEnd.
-
Angular Material is a UI component library for Angular applications that implements Google's Material Design principles. Its main purpose is to provide a set of high-quality, pre-built, and accessible UI components like buttons, forms, navigation, data tables, and more.
Using Angular Material helps developers:
- Quickly build consistent and visually appealing user interfaces
- Ensure accessibility compliance (ARIA, keyboard navigation)
- Implement responsive designs easily
- Apply consistent theming across the application
You typically add it to your project using the Angular CLI command
ng add @angular/material.
Try out Angular coding questions on GreatFrontEnd.
-
Pipes in Angular are a way to transform data for display directly within your templates. They take data as input and return transformed data as output, without changing the original data source.
You use the pipe operator (
|) in template expressions:{{ data | pipeName }} {{ data | pipeName: arg1: arg2 }} {{ data | pipe1 | pipe2 }}Angular provides built-in pipes like
DatePipe,CurrencyPipe,UpperCasePipe,JsonPipe, andAsyncPipe. You can also create custom pipes by implementing thePipeTransforminterface and decorating the class with@Pipe. Pipes help keep your component logic clean by moving presentation logic to the template.
Try out Angular coding questions on GreatFrontEnd.
-
Content projection in Angular is a pattern where you can pass HTML content from a parent component and "project" it into a specific place within a child component's template. It's similar to the concept of
childrenprops in React or slots in Vue. The primary element used for content projection is<ng-content>.It allows you to create reusable components that don't need to know the exact content they will display, making them more flexible. You define placeholders in the child component's template using
<ng-content>, and the parent component provides the actual content between the child component's tags.For example, a simple card component might use
<ng-content>to project the card's body content:<!-- Parent Component Template --> <app-card> <h2>Card Title</h2> <p>This is the card body content.</p> </app-card>
<!-- Child Component (app-card) Template --> <div class="card"> <div class="card-header">...</div> <div class="card-body"> <ng-content></ng-content> <!-- Content from parent is projected here --> </div> <div class="card-footer">...</div> </div>
You can also project multiple pieces of content into different slots using the
selectattribute on<ng-content>.
Try out Angular coding questions on GreatFrontEnd.
-
Angular's view encapsulation determines how the component's styles affect the rest of the application and vice versa. Its main purpose is to isolate component styles to prevent conflicts and make components reusable.
There are three strategies:
Emulated(Default): Angular adds unique attributes to component's host element and its content, then scopes the CSS rules using these attributes. This prevents component styles from leaking out but allows global styles to affect the component.ShadowDom(Available from Angular 6 onwards): Angular uses the browser's native Shadow DOM API to attach a shadow root to the component's host element. The component's template and styles are placed inside this shadow root, providing true style isolation.None: No view encapsulation is applied. The component's styles become global styles, affecting the entire application.
You configure the strategy using the
encapsulationproperty in the@Componentdecorator, likeencapsulation: ViewEncapsulation.None.
Try out Angular coding questions on GreatFrontEnd.
-
Angular's built-in control flow, available from Angular 17 onwards, is a new syntax for handling conditional rendering and list iteration directly within component templates. It replaces the older structural directives like
*ngIf,*ngFor, and*ngSwitch.The new syntax uses block-like structures starting with
@:@if: For conditional rendering, similar to*ngIf, supporting@else ifand@elseblocks.@for: For iterating over collections, similar to*ngFor, supporting an@emptyblock and requiring atrackfunction for efficient updates.@switch: For rendering one block based on a condition, similar to*ngSwitch, using@caseand@defaultblocks.
This new control flow offers several advantages:
- Improved performance, especially for
@forloops due to mandatory tracking. - Enhanced readability and simpler syntax without the leading
*. - Better type checking.
- Reduced bundle size as it's built into the compiler.
It's the recommended way to handle control flow in modern Angular applications.
Try out Angular coding questions on GreatFrontEnd.
-
The
trackByfunction in Angular'sngFordirective is used to improve performance when rendering lists. By default, when the collection iterated byngForchanges (items are added, removed, or reordered), Angular re-renders the entire list of DOM elements.Using
trackBy, you provide a function that returns a unique identifier for each item in the collection. Angular then uses this identifier to track items across changes. Instead of re-rendering everything, Angular can efficiently update the DOM by only adding, removing, or moving elements corresponding to items whose identity has changed. This avoids unnecessary destruction and recreation of DOM elements, leading to faster rendering and potentially preserving element state like input focus or scroll position.You define a
trackByfunction in your component class:trackById(index: number, item: any): number { return item.id; // Assuming each item has a unique 'id' property }
And use it in your template:
<div *ngFor="let item of items; trackBy: trackById">{{ item.name }}</div>
Try out Angular coding questions on GreatFrontEnd.
-
viewChild()andcontentChild()are functions (APIs) introduced in Angular that provide a modern, functional, and signal-based way to query elements or directives from a component's template or projected content. They are available from Angular 17.1 onwards.viewChild()queries for the first element or directive within the component's own template. It returns aSignalthat will emit the queried instance (orundefined/null) after the view is initialized.contentChild()queries for the first element or directive that is projected into the component via<ng-content>. It also returns aSignalthat will emit the queried instance after the projected content is initialized.
The core difference is their lookup scope:
viewChild()looks inside the component's internal view, whilecontentChild()looks within the content provided by a parent component through content projection. Both return reactive Signals, making their values automatically update when the queried element appears or disappears.import { Component, ElementRef, AfterViewInit, AfterContentInit, viewChild, contentChild, signal, computed, } from '@angular/core'; @Component({ selector: 'app-my-component', template: ` <p #myViewElement>This is part of the component's view.</p> <ng-content></ng-content> @if (viewElement()) { <p>View element is present!</p> } @if (projectedElement()) { <p>Projected element is present!</p> } `, standalone: true, }) export class MyComponent implements AfterViewInit, AfterContentInit { // Queries the <p> tag within this component's template viewElement = viewChild<ElementRef>('myViewElement'); // Queries an element projected into <ng-content> projectedElement = contentChild<ElementRef>('myProjectedElement'); ngAfterViewInit() { // The signal's value is available here, or can be read reactively in templates or effects console.log('View Element:', this.viewElement()?.nativeElement); } ngAfterContentInit() { // The signal's value is available here, or can be read reactively in templates or effects console.log( 'Projected Element:', this.projectedElement()?.nativeElement ); } }
<!-- Usage of MyComponent --> <app-my-component> <div #myProjectedElement>This is projected content.</div> </app-my-component>
Try out Angular coding questions on GreatFrontEnd.
-
A standalone component in Angular is a component, directive, or pipe that can be used without being declared in a NgModule. This is achieved by setting the
standalone: trueflag in its decorator.The main benefit is simplifying the Angular application structure by reducing the need for NgModules, especially for smaller components or applications. Instead of declaring dependencies in a NgModule, a standalone component directly imports the modules, components, directives, or pipes it needs in its own
importsarray.You can bootstrap an entire application using a standalone component and configure application-level providers directly during the bootstrap process. Standalone components are the default from Angular 17 onwards and are generally the recommended approach for new development.
Here's a minimal example:
import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; // Import necessary modules @Component({ selector: 'app-standalone-example', standalone: true, // This makes it standalone imports: [CommonModule], // Import dependencies directly template: ` <p>This is a standalone component!</p> <p *ngIf="true">Conditional content</p> `, styles: [], }) export class StandaloneExampleComponent { // Component logic }
Try out Angular coding questions on GreatFrontEnd.
-
A singleton service in Angular means that only a single instance of that service exists throughout the entire application. This is useful for managing global state, sharing data or logic across different components and services, or optimizing resource usage.
The most common and recommended way to achieve a singleton service is by providing it at the root level using the
providedIn: 'root'property in the@Injectable()decorator:import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', // Makes this service a singleton }) export class DataService { private data: any; setData(value: any) { this.data = value; } getData() { return this.data; } }
When
providedIn: 'root'is used, Angular registers the service with the application's root injector. Any component or service that injectsDataServiceanywhere in the application will receive the same instance.
Try out Angular coding questions on GreatFrontEnd.
-
Angular's dependency injection (DI) system works as a hierarchical tree of injectors, mirroring the component tree structure. When a component or service requests a dependency, Angular starts looking for a provider in that component's own injector. If not found, it walks up the injector tree to the parent component's injector, then its parent, and so on, until it reaches the root injector.
The first provider found for the requested token is used to create or provide the dependency instance. This hierarchy determines the scope and lifetime of service instances:
- Providers defined at the root level (e.g., using
@Injectable({ providedIn: 'root' })or in the rootAppModule) are typically singletons for the entire application. - Providers defined at the module level (in a lazy-loaded module's
providersarray) are singletons within that specific module's scope. - Providers defined at the component or directive level (in the
@Componentor@Directiveprovidersarray) create a new instance of the service for each instance of that component or directive.
This hierarchical lookup allows for both application-wide singletons and localized, component-specific service instances.
Try out Angular coding questions on GreatFrontEnd.
- Providers defined at the root level (e.g., using
-
Signals, available from Angular 16 onwards, are a new reactive primitive that provide a way to manage state changes in a more explicit and efficient manner. They are simple wrappers around values that notify interested consumers when the value changes.
The primary reasons for introducing signals are:
- Simplifying change detection: Signals enable fine-grained reactivity, allowing Angular to update only the specific parts of the UI that depend on a changed signal, rather than potentially checking the entire component tree via Zone.js.
- Improving performance: By reducing the amount of work needed for change detection, signals can significantly improve application performance, especially in complex applications. They also pave the way for potential future zoneless applications.
- Enhancing developer experience: Signals make reactivity more explicit and easier to reason about, providing a simpler mental model for state management compared to traditional methods.
Try out Angular coding questions on GreatFrontEnd.
-
Data binding in Angular is a mechanism that synchronizes data between the component class and the template (view). It allows you to display component data in the view and react to user input or events from the view.
There are two main categories:
- One-way binding: Data flows in a single direction, either from the component to the view or from the view to the component.
- Interpolation (
{{ value }}): Displays component property values as text in the template. Data flows from component to view. - Property binding (
[property]="value"): Sets a DOM element's property to the value of a component property. Data flows from component to view. - Attribute binding (
[attr.attribute]="value"): Sets an HTML attribute's value. Useful for attributes without corresponding DOM properties (likecolspan,aria-*). Data flows from component to view. - Event binding (
(event)="handler()"): Listens for events on DOM elements (likeclick,input) and executes a component method. Data flows from view to component.
- Interpolation (
- Two-way binding (
[(ngModel)]="value"): Data flows in both directions simultaneously. Changes in the component property update the view, and changes in the view (usually via user input) update the component property. This is typically achieved using thengModeldirective (requiresFormsModule).
Try out Angular coding questions on GreatFrontEnd.
- One-way binding: Data flows in a single direction, either from the component to the view or from the view to the component.
-
In Angular templates, you use two main types of syntax to interact with your component's data and logic: template expressions and template statements.
- Template expressions are used for data binding. They evaluate to a value and are typically used to display data (
{{ user.name }}) or bind properties ([src]="imageUrl"). They are read-only and cannot change the state of the application directly (e.g., no assignments likex = 1). - Template statements are used for event binding. They execute code in response to an event (
(click)="saveData()"). They can call component methods or perform simple assignments.
Try out Angular coding questions on GreatFrontEnd.
- Template expressions are used for data binding. They evaluate to a value and are typically used to display data (
-
Property binding in Angular allows you to set the value of a target element's property using a component's property value. The data flow is one-way, from the component class to the DOM element or directive property. You use square brackets
[]around the target property name, like[src]="imageUrl".Event binding, on the other hand, lets you listen for events dispatched by a target element (like a button click or input change) and execute a method in your component class when that event occurs. The data flow is from the DOM element to the component. You use parentheses
()around the target event name, like(click)="saveData()".The main difference is the direction of data flow: property binding sends data to the element, while event binding receives notifications from the element.
Try out Angular coding questions on GreatFrontEnd.
-
Data sharing between Angular components depends on their relationship:
- Parent to Child: Use the
@Input()decorator in the child component to receive data passed from the parent's template. - Child to Parent: Use the
@Output()decorator andEventEmitterin the child component to emit events (often carrying data) that the parent component listens to in its template. - Sibling or Unrelated Components: Use a shared service. The service holds the data and provides methods to update and access it. Components inject the service and interact with it. For reactive data updates, the service typically uses RxJS Observables (
Subject,BehaviorSubject) or Signals (available from Angular 17+).
Try out Angular coding questions on GreatFrontEnd.
- Parent to Child: Use the
-
Host bindings and host listeners are decorators used in Angular directives and components to interact directly with the host element, which is the element the directive or component is applied to.
@HostBindingallows you to bind a property of the host element (likeclass,style,id,src, etc.) to a property of your directive or component class. This is useful for dynamically changing the host element's appearance or attributes based on the component/directive's state.@HostListenerallows you to subscribe to events emitted by the host element (likeclick,mouseover,keydown, etc.) and execute a method in your directive or component class when that event occurs. This is useful for reacting to user interactions directly on the element.
They provide a declarative way to manage interactions with the host element without needing to manually access the DOM.
Try out Angular coding questions on GreatFrontEnd.
-
@Inputand@Outputare decorators used in Angular for communication between parent and child components.@Inputallows a parent component to pass data down to a child component. You declare a property in the child component with@Input()and the parent binds to it in its template.@Outputallows a child component to send data or notify the parent component about events happening up to the parent. You declare a property in the child with@Output(), initialized as anEventEmitter, and the child callsemit()to send data. The parent listens to this output property using event binding syntax().
This pattern establishes a clear, unidirectional data flow (down) and event flow (up), making component interactions predictable and easier to manage.
Try out Angular coding questions on GreatFrontEnd.
-
Angular handles forms primarily through two distinct approaches: Template-driven forms and Reactive forms.
- Template-driven forms are simpler and suitable for basic forms. They rely heavily on directives like
ngModelandngFormdirectly within the template to manage form state and validation. The logic is largely handled by Angular directives in the HTML. - Reactive forms are more robust and scalable, ideal for complex forms. They build the form model programmatically in the component class using classes like
FormControl,FormGroup, andFormArray. This approach offers better testability, predictability, and control over form data flow and validation.
Choose Template-driven for simple forms and Reactive for more complex scenarios or when testability is a priority.
Try out Angular coding questions on GreatFrontEnd.
- Template-driven forms are simpler and suitable for basic forms. They rely heavily on directives like
-
Reactive forms and template-driven forms are two different approaches in Angular for handling user input through forms.
- Reactive Forms: The form model is defined explicitly in the component class using
FormGroup,FormControl, andFormArray. Validation is also defined programmatically in the component. They are synchronous, predictable, and easier to test, making them suitable for complex, dynamic, or large-scale forms. - Template-Driven Forms: The form model is created implicitly by directives like
NgModelandNgFormdirectly in the template. Validation is defined using template directives (e.g.,required,minlength). They are asynchronous and simpler to set up for basic forms but less scalable and harder to test for complex scenarios.
Choose reactive forms for most applications, especially when forms are complex or require dynamic behavior. Use template-driven forms for very simple forms or quick prototypes.
Try out Angular coding questions on GreatFrontEnd.
- Reactive Forms: The form model is defined explicitly in the component class using
-
FormBuilderis a service provided by Angular's@angular/formsmodule that simplifies the creation ofFormControl,FormGroup, andFormArrayinstances in reactive forms. Instead of manually instantiating each control and group withnew FormControl(...)andnew FormGroup({...}), you injectFormBuilderand use its methods likegroup(),control(), andarray(). This leads to cleaner, more readable code, especially for complex forms.For example, creating a simple form group:
// Without FormBuilder const myForm = new FormGroup({ name: new FormControl(''), email: new FormControl('') }); // With FormBuilder import { FormBuilder, FormGroup } from '@angular/forms'; // In your component/service constructor constructor(private fb: FormBuilder) {} // To create the form const myForm = this.fb.group({ name: [''], // Shorthand for new FormControl('') email: [''] });
Try out Angular coding questions on GreatFrontEnd.
-
In Angular reactive forms, you group form controls primarily using two classes:
FormGroupandFormArray.FormGroup: Used to group a collection ofFormControl,FormGroup, orFormArrayinstances into a single object, where each child control is identified by a unique key (like properties in an object). It's suitable for fixed structures like a user's name and email.FormArray: Used to group a collection ofFormControl,FormGroup, orFormArrayinstances into an array. It's suitable for dynamic lists of controls, like a list of phone numbers or addresses, where the number of items can change.
You typically create these using the
FormBuilderservice for convenience:import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms'; constructor(private fb: FormBuilder) {} myForm = this.fb.group({ name: ['', Validators.required], // FormControl address: this.fb.group({ // FormGroup nested street: [''], city: [''] }), phoneNumbers: this.fb.array([ // FormArray this.fb.control('') // Initial FormControl in the array ]) });
In the template, you bind to these groups using
[formGroup]and[formArrayName]directives.
Try out Angular coding questions on GreatFrontEnd.
-
Custom validators in Angular allow you to define specific validation rules beyond the built-in ones like
requiredorminLength.You create a custom validator as a function that takes an
AbstractControl(representing the form control, group, or array) as an argument and returns either:nullif the control's value is valid- A
ValidationErrorsobject (e.g.,{ 'myError': true }) if the value is invalid
There are two types:
- Synchronous validators: Return
ValidationErrors | nullimmediately. - Asynchronous validators: Return
Promise<ValidationErrors | null>orObservable<ValidationErrors | null>. These are used for validations that require time, like checking against a server API.
In Reactive Forms, you pass these validator functions directly when creating
FormControl,FormGroup, orFormArrayinstances. Synchronous validators go in the second argument array, and asynchronous validators go in the third argument array.// Sync validator example function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const forbidden = nameRe.test(control.value); return forbidden ? { forbiddenName: { value: control.value } } : null; }; } // Applying in Reactive Forms this.myForm = new FormGroup({ name: new FormControl('', [ Validators.required, forbiddenNameValidator(/admin/i), ]), // Sync validators email: new FormControl('', [], [this.emailExistsValidator]), // Async validators });
In Template-Driven Forms, you typically create a directive that implements the
ValidatororAsyncValidatorinterface and registers itself with theNG_VALIDATORSorNG_ASYNC_VALIDATORSprovider token.
Try out Angular coding questions on GreatFrontEnd.
-
Angular Routing is a mechanism that allows you to navigate between different views or components in your single-page application (SPA) without requiring a full page reload. It maps URL paths to specific components, enabling features like deep linking, browser history navigation, and organized application structure.
To set it up:
-
Include the Router Module: When creating a new project with the Angular CLI, you can add routing automatically. For an existing project, import
RouterModulefrom@angular/routerinto your main application module (usuallyAppModule). -
Define Routes: Create an array of
Routeobjects, typically in a separate file likeapp-routing.module.ts. Each route object specifies apath(the URL segment) and thecomponentto display when that path is active.import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; const routes: Routes = [ { path: '', component: HomeComponent }, // Default route { path: 'about', component: AboutComponent }, { path: '**', redirectTo: '' }, // Wildcard route for unmatched paths ];
-
Configure the Root Module: Import the
routesarray and useRouterModule.forRoot(routes)in theimportsarray of your main application module (AppModule). Feature modules useRouterModule.forChild(routes). -
Add the Router Outlet: Place the
<router-outlet></router-outlet>directive in your main application template (usuallyapp.component.html). This is where Angular will render the component corresponding to the current route. -
Create Navigation Links: Use the
routerLinkdirective on anchor tags (<a>) instead ofhrefto create navigation links.<a routerLink="/">Home</a> <a routerLink="/about">About</a>
This setup allows Angular to intercept browser navigation, match the URL to a defined route, and display the associated component in the router outlet.
Try out Angular coding questions on GreatFrontEnd.
-
-
Router links, provided by the
routerLinkdirective in Angular, are the primary way to enable navigation between different routes within your application using declarative syntax in your templates. Instead of using the standard HTMLhrefattribute, which causes a full page reload,routerLinkleverages Angular's Router to perform client-side navigation.You typically apply
routerLinkto an anchor (<a>) tag, but it can be used on any element.Here are common ways to use it:
- Static path:
<a routerLink="/dashboard">Go to Dashboard</a>
- Path with parameters: Use an array syntax.
<a [routerLink]="['/products', productId]">View Product</a>
- Path with query parameters and fragment:
<a [routerLink]="['/search']" [queryParams]="{ category: 'electronics' }" fragment="results" >Search Electronics</a >
Using
routerLinkensures that Angular's routing mechanism handles the navigation, allowing for features like route guards, resolvers, and smooth transitions without a full page refresh.
Try out Angular coding questions on GreatFrontEnd.
- Static path:
-
You can pass parameters in Angular routes primarily in two ways:
- Route Parameters: These are part of the URL path itself, typically used to identify a specific resource. You define them in the route configuration using a colon (
:), likepath: 'items/:id'. To navigate, you pass them as segments in therouter.navigatearray, for example,this.router.navigate(['/items', itemId]). In the target component, you read them using theActivatedRouteservice, accessingthis.route.snapshot.paramMap.get('id')for the initial load or subscribing tothis.route.paramMapfor changes. - Query Parameters: These are appended to the URL after a question mark (
?), used for optional values like filtering, sorting, or pagination. They are not defined in the route path. To navigate, you pass them in thequeryParamsobject of therouter.navigateoptions, likethis.router.navigate(['/items'], { queryParams: { category: 'electronics' } }). In the target component, you read them usingActivatedRoute, accessingthis.route.snapshot.queryParamMap.get('category')or subscribing tothis.route.queryParamMap.
Try out Angular coding questions on GreatFrontEnd.
- Route Parameters: These are part of the URL path itself, typically used to identify a specific resource. You define them in the route configuration using a colon (
-
The wildcard route in Angular, represented by the path
**, is a special route that the Angular router uses as a fallback. It matches any URL that doesn't match any of the previously defined routes in your application's routing configuration. Its primary purpose is to handle unknown or invalid URLs, typically by redirecting the user to a 404 "Page Not Found" page or sometimes back to the application's home page. It must always be the last route defined in yourroutesarray so that the router checks all specific routes first before falling back to the wildcard.import { Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, // Wildcard route must be last { path: '**', component: PageNotFoundComponent }, ];
Try out Angular coding questions on GreatFrontEnd.
-
A
RouterOutletis a directive provided by Angular's router module. It acts as a placeholder in your application's template where the router should display the component corresponding to the current route. When the URL changes and matches a configured route, the router dynamically loads the associated component and renders it inside the<router-outlet>tag. Think of it as a dynamic slot in your layout that gets filled with different components depending on the navigation state.
Try out Angular coding questions on GreatFrontEnd.
-
The router state in Angular is a snapshot of the router's tree of activated routes at a specific point in time. It represents the current state of the application's navigation.
Each node in this tree is an
ActivatedRouteinstance, which holds information about a segment of the URL associated with a loaded component. This information includes:- Route parameters (
params) - Query parameters (
queryParams) - Static and resolved data (
data) - The URL segments (
url) - The URL fragment (
fragment) - References to parent and child routes (
parent,children)
You typically access the router state by injecting the
ActivatedRouteservice into a component to get information about the route that activated that specific component. You can also access the entire state tree via therouterStateproperty of theRouterservice.It's crucial for tasks like fetching data based on route parameters, displaying content conditionally, or understanding the current navigation context.
Try out Angular coding questions on GreatFrontEnd.
- Route parameters (
-
Angular Guards are services that implement specific interfaces to control navigation within your application. They are used to protect routes by deciding if a user can activate a route (
CanActivate), activate a child route (CanActivateChild), deactivate a route (CanDeactivate), load a lazy-loaded module (CanLoad), or match a route definition (CanMatch). They can also be used to pre-fetch data before a route is activated (Resolve).Guards are typically implemented as injectable services or, from Angular 14 onwards, as functions. They return a boolean (
trueto allow,falseto deny) or aUrlTree(to redirect), or anObservableorPromisethat resolves to one of these types.You apply guards to routes in your routing configuration using properties like
canActivate,canActivateChild,canDeactivate,canLoad,canMatch, orresolve.For example, a simple
CanActivateguard using the functional syntax (Angular 14+):// auth.guard.ts import { CanActivateFn, Router } from '@angular/router'; import { inject } from '@angular/core'; import { AuthService } from './auth.service'; // Assume you have an auth service export const authGuard: CanActivateFn = (route, state) => { const authService = inject(AuthService); const router = inject(Router); if (authService.isAuthenticated()) { return true; // Allow navigation } else { // Redirect to login page return router.createUrlTree(['/login']); } }; // app-routing.module.ts import { Routes } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; import { authGuard } from './auth.guard'; const routes: Routes = [ { path: 'dashboard', component: DashboardComponent, canActivate: [authGuard], // Apply the guard here }, // ... other routes ];
Try out Angular coding questions on GreatFrontEnd.
-
The
asyncpipe in Angular templates is used to automatically subscribe to anObservableorPromiseand unwrap the value they emit. When a new value is emitted, the pipe triggers change detection to update the view.Its main purposes are:
- Simplifying template code by removing the need for manual subscription and variable updates in the component class
- Preventing memory leaks by automatically unsubscribing from the
Observablewhen the component is destroyed - Handling the asynchronous nature of data streams gracefully in the template
You use it directly in the template like this:
<div>{{ data$ | async }}</div>
where `data
Try out Angular coding questions on GreatFrontEnd.
-
In Angular, pipes transform data in templates. By default, pipes are pure.
- Pure pipes are memoized. They only re-run their
transformmethod when their input value changes (for primitives like strings, numbers, booleans) or when the input object reference changes (for objects like arrays, objects, dates). They are efficient because they avoid unnecessary recalculations. - Impure pipes are not memoized. They re-run their
transformmethod during every change detection cycle, regardless of whether the input value or reference has changed. This can be less performant but is necessary for transformations that depend on mutable data structures (like filtering or sorting an array in place) or asynchronous operations (like theasyncpipe).
You make a pipe impure by setting
pure: falsein the@Pipedecorator:@Pipe({ name: 'myImpurePipe', pure: false, // Makes the pipe impure }) export class MyImpurePipe implements PipeTransform { transform(value: any, ...args: any[]): any { // Transformation logic return transformedValue; } }
Use pure pipes whenever possible for better performance. Use impure pipes only when the transformation logic requires checking for changes within objects or relies on external state/asynchronous updates.
Try out Angular coding questions on GreatFrontEnd.
- Pure pipes are memoized. They only re-run their
-
A custom pipe in Angular allows you to transform data within your templates. To create one, you typically use the Angular CLI command
ng generate pipe <pipe-name>. This creates a class decorated with@Pipe, which requires anameproperty used in templates. The class must implement thePipeTransforminterface, which mandates atransformmethod. This method takes the inputvalueand optionalargsand returns the transformed output.import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'myCustomPipe', // Used in templates like {{ data | myCustomPipe }} }) export class MyCustomPipe implements PipeTransform { transform(value: any, ...args: any[]): any { // Your transformation logic here return transformedValue; } }
Once created, you use it in your template like
{{ data | myCustomPipe:arg1:arg2 }}.
Try out Angular coding questions on GreatFrontEnd.
-
Angular needs to compile your application's code, which includes TypeScript and HTML templates, into efficient JavaScript that browsers can understand and execute. There are two main types of compilation:
- Just-in-Time (JIT) compilation: This happens in the browser at runtime. The Angular compiler is included in the application bundle, and it compiles the application code just before it runs. This is typically used during development (
ng serve) because it allows for faster rebuilds. - Ahead-of-Time (AOT) compilation: This happens during the build process, before the browser loads the application. The Angular compiler runs on your machine, converting your templates and components into highly optimized JavaScript. The browser then downloads and runs the pre-compiled code. This is the default and recommended approach for production builds (
ng build --configuration production) because it results in smaller bundles, faster startup times, and catches template errors earlier.
AOT is preferred for production due to its performance benefits and early error detection.
Try out Angular coding questions on GreatFrontEnd.
- Just-in-Time (JIT) compilation: This happens in the browser at runtime. The Angular compiler is included in the application bundle, and it compiles the application code just before it runs. This is typically used during development (
-
Change detection in Angular is the mechanism that synchronizes the application's data model with the user interface (DOM). Angular needs this because JavaScript is dynamic, and it doesn't automatically know when data bound to the view has changed.
By default, Angular uses Zone.js to detect asynchronous operations like browser events (clicks, input), timers (
setTimeout), and HTTP requests. When one of these operations completes, Zone.js notifies Angular, triggering a change detection cycle.During a cycle, Angular traverses the component tree from top to bottom. For each component, it checks if the values of any template expressions (like
{{ data }}or[property]="data") have changed since the last check. If a change is detected, Angular updates the corresponding part of the DOM.You can optimize this process using the
OnPushchange detection strategy. WithOnPush, a component is only checked when:- One of its input properties changes reference (not just value).
- An event originates from the component or its children.
- Change detection is explicitly triggered (e.g., using
ChangeDetectorRef). - An observable bound with the
asyncpipe emits a new value.
Available from Angular 16 onwards, Signals offer a more granular approach to change detection, allowing specific parts of the UI to update only when the signals they depend on change, potentially reducing the need for full tree checks and Zone.js in the future.
Try out Angular coding questions on GreatFrontEnd.
-
You might need to manually trigger change detection in Angular, especially when using the
OnPushchange detection strategy or when working outside of Angular's default Zone.js environment (like with Web Workers or certain third-party libraries).The primary ways to manually trigger change detection are:
-
ChangeDetectorRef.detectChanges(): Runs change detection for the current component and its descendants. Use this when you know a change has occurred within the component's view or its children that Angular might not otherwise detect, especially after detaching a component -
ChangeDetectorRef.markForCheck(): Marks the component and its ancestors as needing to be checked during the next change detection cycle. It doesn't trigger the check immediately. This is the preferred method when usingOnPush, as it efficiently signals Angular that a relevant input or observable has emitted, ensuring the component is checked during the next global tick -
ApplicationRef.tick(): Triggers change detection for the entire application. This is less common for component-specific updates and more for global scenarios or testing
import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ApplicationRef, signal, // Available from Angular 16 onwards } from '@angular/core'; @Component({ selector: 'app-my-component', template: ` <p>{{ message() }}</p> <button (click)="updateMessage()">Update Message (Manual CD)</button> `, // Often used with OnPush strategy changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, // Example with standalone component }) export class MyComponent { // Using Signals for reactivity (Available from Angular 16 onwards) message = signal('Initial message'); constructor( private cdr: ChangeDetectorRef, private appRef: ApplicationRef ) {} updateMessage() { // Update the signal. With OnPush, if `message` was a regular property, // we'd need manual CD. With Signals, it often handles itself, but manual CD // might still be useful for edge cases or non-signal changes. this.message.set( 'Message updated at ' + new Date().toLocaleTimeString() ); // Choose one method depending on the scenario: // Method 1: Trigger change detection for this component and its children // Useful if the component's change detector was detached or for immediate updates. // this.cdr.detectChanges(); // Method 2: Mark this component and ancestors for check (common with OnPush) // This is usually sufficient and more performant than detectChanges() when using OnPush. // This example uses a signal, which will automatically mark the component dirty when read in template. // However, if `message` was a regular property, `markForCheck()` would be crucial. this.cdr.markForCheck(); // Method 3: Trigger change detection for the entire application // this.appRef.tick(); } }
Try out Angular coding questions on GreatFrontEnd.
-
-
zone.jsis a library that patches asynchronous browser APIs likesetTimeout,addEventListener, andPromiseto create execution contexts called "zones". It allows tracking when asynchronous operations start and finish.Angular uses
zone.jsto automatically detect when potential changes might have occurred in your application's data. When an asynchronous event tracked byzone.jscompletes (like a button click, an HTTP response, or a timer firing),zone.jsnotifies Angular, which then triggers its change detection mechanism to update the UI if necessary.NgZoneis an injectable Angular service that wrapszone.js. It provides methods to explicitly run code inside Angular's zone (run()) or outside Angular's zone (runOutsideAngular()). Running code outside the zone is useful for performance-sensitive tasks like frequent DOM manipulations or animations, as it prevents Angular's change detection from running unnecessarily after every microtask or event within that code block.
Try out Angular coding questions on GreatFrontEnd.
-
A zoneless Angular application is one configured to run without
zone.js, the library that traditionally monkey-patches browser async APIs (likesetTimeout,addEventListener,fetch) to automatically notify Angular when something might have changed, triggering change detection.The significance of zoneless mode lies in moving away from this automatic, potentially over-eager change detection mechanism. Instead, change detection is triggered explicitly by the developer (e.g., using
ChangeDetectorRef.markForCheck()) or, more importantly, reactively by Angular's new Signals primitive.This approach offers several benefits:
- Improved Performance: Change detection runs only when truly necessary, reducing unnecessary checks and improving application speed.
- Reduced Bundle Size: The
zone.jslibrary is removed from the application bundle. - Easier Debugging: Stack traces are cleaner without the zone frames.
- Better Interoperability: Fewer potential conflicts with third-party libraries that also interact with global async APIs.
- Enables Signals: Zoneless mode is the natural environment for Signals, providing fine-grained, reactive updates without relying on broad zone notifications.
Available from Angular 16 onwards as a developer preview, and becoming more stable and recommended with subsequent versions like Angular 17+.
Try out Angular coding questions on GreatFrontEnd.
-
Angular Ivy is the default compilation and rendering pipeline for Angular applications, introduced as the default in Angular 9. It's a complete rewrite designed to improve build times, reduce bundle sizes, and enhance runtime performance.
Key advantages include:
- Locality: Ivy compiles components independently, leading to significantly faster build times, especially during development.
- Tree-shaking: The generated code is highly tree-shakable, meaning unused parts of the Angular framework can be removed from the final bundle, resulting in smaller application sizes.
- Smaller bundles: Due to better tree-shaking and a more efficient runtime, applications built with Ivy are generally smaller.
- Faster rendering: A smaller runtime and more efficient generated code can lead to faster initial loading and rendering of the application.
- Improved debugging: Provides better stack traces and debugging capabilities.
Try out Angular coding questions on GreatFrontEnd.
-
The Angular HttpClient is used to make HTTP requests to backend servers. First, import
HttpClientModulein yourapp.config.tsorapp.module.ts(depending on whether you're using standalone components or modules). Then, injectHttpClientinto your component or service. Use methods likeget(),post(),put(),delete()to make requests. Subscribe to the returnedObservableto handle the response.import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class DataService { private apiUrl = 'https://jsonplaceholder.typicode.com/todos'; constructor(private http: HttpClient) {} getData() { return this.http.get(this.apiUrl); } }
import { Component, OnInit } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-my-component', template: ` <ul> <li *ngFor="let item of data">{{ item.title }}</li> </ul> `, standalone: true, // Assuming standalone for modern Angular context providers: [DataService], // Provide the service if component is standalone }) export class MyComponent implements OnInit { data: any[] = []; constructor(private dataService: DataService) {} ngOnInit() { this.dataService.getData().subscribe( (response: any) => { this.data = response; }, error => { console.error('Error fetching data:', error); } ); } }
Try out Angular coding questions on GreatFrontEnd.
-
An Observable represents a stream of data or events over time. It's a core concept in reactive programming and is used extensively in Angular for handling asynchronous operations like HTTP requests, user input events, and routing changes.
Think of it as a producer that pushes multiple values to consumers (called Observers) over time. You subscribe to an Observable to start receiving these values.
Key characteristics:
- Lazy: Nothing happens until you subscribe
- Asynchronous: Designed for operations that complete over time
- Multiple values: Can emit zero, one, or many values
- Cancellable: Subscriptions can be easily cancelled
- Composable: Can be transformed and combined using operators
In Angular, you'll commonly subscribe to Observables returned by the
HttpClientfor API calls, or Observables representing form value changes or router events. It's crucial to unsubscribe when the component is destroyed to prevent memory leaks, although theasyncpipe handles this automatically in templates.
Try out Angular coding questions on GreatFrontEnd.
-
Promises and Observables are both used for handling asynchronous operations in JavaScript and Angular, but they differ in several key ways:
- Value Emission: A Promise emits a single value (either a resolved value or an error) and then completes. An Observable can emit multiple values over time (a stream of data) and can also complete or error.
- Execution: Promises are eager. The asynchronous operation starts as soon as the Promise is created. Observables are lazy. The operation doesn't start until you
subscribe()to it. - Cancellability: Promises are not cancellable. Once the operation starts, you cannot stop it. Observables are cancellable. You can stop the operation at any time by calling
unsubscribe(). - Operators: Promises have limited built-in methods (
.then(),.catch(),.finally()). Observables come with a rich set of operators (from RxJS) for transforming, filtering, and combining data streams (likemap,filter,debounceTime). - Error Handling: Promises handle errors with a single
.catch()block. Observables handle errors within the stream using operators likecatchError, allowing for more flexible error recovery or retry strategies.
In Angular, Observables are widely used for handling asynchronous events like HTTP requests, router events, and form changes because of their ability to handle multiple values, cancellability, and powerful operators.
Try out Angular coding questions on GreatFrontEnd.
-
RxJS is a library for reactive programming using Observables, making it easier to compose asynchronous or callback-based code sequences. Think of it as dealing with streams of data or events over time.
Its core concepts are:
- Observables: Represent a stream of values that can be emitted over time.
- Observers (or Subscribers): Listen to an Observable and react to the values it emits, as well as error or completion notifications.
- Operators: Pure functions that take an Observable as input and return a new Observable. They are used to transform, filter, or combine streams.
Angular heavily uses RxJS for handling asynchronous operations like HTTP requests (the
HttpClientreturns Observables), routing events, form control value changes, and custom events viaEventEmitter. It provides a powerful and consistent way to manage complex asynchronous logic in a declarative manner.
Try out Angular coding questions on GreatFrontEnd.
-
An RxJS
Subjectis a special type of Observable that acts as both an Observer and an Observable.- As an Observer, it can receive values using
next(),error(), andcomplete()methods - As an Observable, you can subscribe to it using the
subscribe()method
The key difference from a regular Observable is that a Subject is multicast, meaning it shares a single execution stream among all its subscribers. A regular Observable is typically unicast, creating a new execution for each subscriber.
Subjects are commonly used in Angular for:
- Implementing event emitters
- Sharing data or events between different parts of an application, like between components via a service
- Creating hot Observables from cold ones
There are also specialized Subjects like
BehaviorSubject(emits the last value to new subscribers),ReplaySubject(emits a buffer of past values), andAsyncSubject(emits only the last value upon completion).import { Subject } from 'rxjs'; const subject = new Subject<string>(); // Subscribe to the subject subject.subscribe({ next: v => console.log(`Observer A: ${v}`), }); subject.subscribe({ next: v => console.log(`Observer B: ${v}`), }); // Emit values to all current subscribers subject.next('Hello'); // Both A and B receive 'Hello' subject.next('World'); // Both A and B receive 'World'
Try out Angular coding questions on GreatFrontEnd.
- As an Observer, it can receive values using
-
In RxJS,
subscribeis the method used to execute anObservableand start receiving values. AnObservableis like a blueprint for a stream of data, but it doesn't do anything until yousubscribeto it.When you call
subscribe, you provide anObserveror callback functions (next,error,complete) to handle the emitted values, errors, or completion notifications. Thesubscribemethod returns aSubscriptionobject.It's crucial to unsubscribe from subscriptions when they are no longer needed, especially in Angular components when the component is destroyed. Failing to unsubscribe can lead to memory leaks and potential errors.
Common ways to unsubscribe in Angular include:
- Manual Unsubscription: Storing the
Subscriptionobject and callingsubscription.unsubscribe()in the component'sngOnDestroylifecycle hook. - Using the
asyncpipe: This is the recommended approach for observables used directly in templates, as it automatically handles subscription and unsubscription. - Using RxJS operators: Operators like
takeUntil,take,first, ortakeWhilecan complete the observable stream automatically under certain conditions, effectively ending the subscription.takeUntilcombined with a subject triggered inngOnDestroyis a common pattern.
Try out Angular coding questions on GreatFrontEnd.
- Manual Unsubscription: Storing the
-
Creating custom RxJS operators allows you to encapsulate common observable transformation logic for reusability and readability. A custom operator is essentially a function that takes a source observable as input and returns a new observable, typically by applying one or more existing RxJS operators using the
pipemethod.The most common pattern for a custom operator is a function that returns another function. The outer function can optionally take configuration arguments, and the inner function takes the source observable and returns the transformed observable.
Here's a basic structure:
import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; function myCustomOperator<T>(): ( source: Observable<T> ) => Observable<string> { return (source: Observable<T>) => { return source.pipe( // Apply existing operators here map(value => `Processed: ${value}`) ); }; }
You then use it with the
pipemethod on an observable:import { of } from 'rxjs'; of(1, 2, 3) .pipe( myCustomOperator() // Call the factory function ) .subscribe(value => console.log(value)); // Output: // Processed: 1 // Processed: 2 // Processed: 3
This pattern makes your code cleaner and easier to maintain by abstracting complex observable sequences into single, descriptive functions.
Try out Angular coding questions on GreatFrontEnd.
-
HTTP interceptors in Angular are services that you can use to inspect and transform HTTP requests and responses before they are sent or processed. They provide a way to handle HTTP operations globally for your application.
You can use them for common tasks like:
- Adding authentication tokens to outgoing requests
- Logging requests and responses
- Handling errors centrally
- Caching responses
- Modifying request or response headers
To create one, you implement the
HttpInterceptorinterface and provide it using theHTTP_INTERCEPTORSinjection token withmulti: true.import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable() export class AuthInterceptor implements HttpInterceptor { intercept( req: HttpRequest<any>, next: HttpHandler ): Observable<HttpEvent<any>> { // Clone the request and add a header const authReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer my-auth-token'), }); // Pass the cloned request to the next handler return next.handle(authReq); } }
Then, register it in your module's providers:
import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { AuthInterceptor } from './auth.interceptor'; // ... in your @NgModule decorator providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, ];
Try out Angular coding questions on GreatFrontEnd.
-
Angular HTTP Interceptors allow you to intercept outgoing HTTP requests and incoming HTTP responses, process them, and pass them along. They are useful for tasks like adding authentication tokens to headers, logging requests and responses, handling errors globally, or caching responses.
You can provide multiple interceptors in your application. Angular processes them in a chain. To provide multiple interceptors, you use the
HTTP_INTERCEPTORSinjection token and set themultiproperty totruefor each interceptor provider in your module or component'sprovidersarray. The order in which you list them in theprovidersarray determines the order they are applied to requests and responses.import { provideHttpClient, withInterceptorsFromDi, } from '@angular/common/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { AuthInterceptor } from './auth.interceptor'; import { LoggingInterceptor } from './logging.interceptor'; @NgModule({ providers: [ // Using provideHttpClient with interceptorsFromDi (modern approach) // provideHttpClient(withInterceptorsFromDi()), // { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, // { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }, // Or using the older module-based approach (HttpClientModule) // and providing interceptors directly { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true, }, ], }) export class AppModule {}
Try out Angular coding questions on GreatFrontEnd.
-
Dynamic components in Angular are components that are not declared in your template but are loaded and rendered programmatically at runtime. You typically use them for scenarios like creating dashboards, modal dialogs, or tabs where the specific component to display isn't known until the application is running.
To create and load a dynamic component:
- Identify a location in your template where the dynamic component should be inserted. This is usually marked by an element that serves as an anchor point.
- In your component class, get a reference to the
ViewContainerRefassociated with that anchor point. You can injectViewContainerRefand query for elements using@ViewChildor@ViewChildren. - Call the
createComponentmethod on theViewContainerRef, passing the class of the component you want to create.
import { Component, ViewChild, ViewContainerRef, AfterViewInit, } from '@angular/core'; import { DynamicComponent } from './dynamic.component'; // The component to load dynamically @Component({ selector: 'app-host', template: '<div #dynamicContainer></div>', // Anchor point }) export class HostComponent implements AfterViewInit { @ViewChild('dynamicContainer', { read: ViewContainerRef }) container!: ViewContainerRef; ngAfterViewInit() { // Clear previous components if any this.container.clear(); // Create the component instance const componentRef = this.container.createComponent(DynamicComponent); // Optional: Interact with the component instance componentRef.instance.someInput = 'Hello from host'; componentRef.instance.someOutput.subscribe(value => { console.log('Output received:', value); }); } }
Available from Angular 13 onwards, you no longer need
ComponentFactoryResolveror to list components inentryComponentsfor this common use case.
Try out Angular coding questions on GreatFrontEnd.
-
Renderer2is an Angular service that provides an abstraction layer over the DOM manipulation API. You use it to safely interact with the DOM or other rendering environments (like server-side rendering or web workers) without directly accessing the native elements viaElementRef.nativeElement.Using
Renderer2is preferred over direct DOM manipulation because:- It makes your application compatible with server-side rendering (SSR) and web workers, where the native DOM might not exist.
- It provides a layer of security by sanitizing values when setting properties or attributes.
- It abstracts away platform-specific details, making your code more portable.
Common methods include
createElement,appendChild,setProperty,setAttribute,addClass,removeClass,setStyle, andlisten. You injectRenderer2into your component or directive and use it along withElementRefto target specific elements.import { Component, ElementRef, Renderer2, AfterViewInit, } from '@angular/core'; @Component({ selector: 'app-example', template: '<div #myDiv>Hello</div>', }) export class ExampleComponent implements AfterViewInit { constructor(private el: ElementRef, private renderer: Renderer2) {} ngAfterViewInit() { // Safely set a style using Renderer2 const div = this.el.nativeElement.querySelector('#myDiv'); this.renderer.setStyle(div, 'color', 'blue'); // Safely listen to an event this.renderer.listen(div, 'click', () => { console.log('Div clicked!'); }); } }
Try out Angular coding questions on GreatFrontEnd.
-
Angular Elements are Angular components packaged as custom elements, which are part of the Web Components standard. This allows you to use your Angular components in any HTML environment, whether it's a plain HTML page, a different framework like React or Vue, or even another Angular application.
They work by using the
createCustomElementfunction from the@angular/elementspackage to convert an Angular component class into a standard HTML custom element class. You then register this class with the browser'scustomElements.define()API, giving it a custom tag name (like<my-angular-element>).Inputs to the Angular component become attributes on the custom element, and outputs become custom DOM events dispatched by the element. This makes your Angular components interoperable and reusable outside the typical Angular application shell.
Try out Angular coding questions on GreatFrontEnd.
-
Angular Custom Elements allow you to package an Angular component as a native web platform custom element. This makes it possible to use your Angular components in any HTML environment, whether it's a plain HTML page, a React app, a Vue app, or another framework, without needing the full Angular application context.
Internally, Angular uses the
@angular/elementspackage. The core mechanism involves thecreateCustomElementfunction, which takes an Angular component class and an injector. It returns a standard JavaScript class that extendsHTMLElement. This generated class acts as a bridge:- It maps the native custom element lifecycle callbacks (like
connectedCallback,disconnectedCallback) to the corresponding Angular component lifecycle hooks (ngOnInit,ngOnDestroy). - It handles property changes on the custom element, mapping them to Angular component inputs (
@Input). - It dispatches native custom events when the Angular component emits through its outputs (
@Output). - It manages the instantiation and change detection of the underlying Angular component within the custom element's DOM (often using Shadow DOM).
You define the custom element using the standard
customElements.define()browser API, associating a tag name with the class returned bycreateCustomElement.
Try out Angular coding questions on GreatFrontEnd.
- It maps the native custom element lifecycle callbacks (like
-
Improving Angular app performance involves both build-time and runtime optimizations.
Key techniques include:
- Build-time:
- Using Ahead-of-Time (AOT) compilation, which is the default for production builds, compiles your Angular HTML and TypeScript into efficient JavaScript code during the build process
- Building with production flags (
ng build --configuration productionorng build --prodin older versions) to enable optimizations like tree shaking, minification, and dead code elimination
- Runtime:
- Implementing lazy loading for modules to load application parts only when they are needed, significantly reducing the initial bundle size and load time
- Setting the change detection strategy to
OnPushfor components. This tells Angular to only check for changes when component inputs change, an event originates from the component or its children, or an observable the component is subscribed to emits a value (when using theasyncpipe), drastically reducing the number of checks performed - Using the
trackByfunction with*ngFordirectives to help Angular efficiently update the DOM when list items change, improving rendering performance for large lists - Optimizing RxJS subscriptions by unsubscribing to prevent memory leaks and using appropriate operators (
debounceTime,distinctUntilChanged,takeUntil) to control the flow of data - Offloading heavy computations to web workers to keep the main UI thread responsive
- Implementing virtual scrolling for large lists to render only the items currently visible in the viewport
- Considering Server-Side Rendering (SSR) or pre-rendering for improved initial load performance and SEO
Profiling tools like browser developer tools and Angular DevTools are essential for identifying performance bottlenecks.
Try out Angular coding questions on GreatFrontEnd.
- Build-time:
-
Lazy loading in Angular is a technique used to load parts of your application code only when they are needed, typically when a user navigates to a specific route. Instead of loading the entire application bundle upfront, lazy loading splits the application into smaller bundles and loads them on demand.
The primary benefit is significantly improving the application's initial load time because the browser only downloads the code required for the initial view.
You implement lazy loading in Angular primarily through the router configuration. Instead of importing and directly referencing a module in your route definition, you use the
loadChildrenproperty with a dynamic import:const routes: Routes = [ { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), }, ];
This tells the router to fetch and load the
AdminModuleand its associated components and services only when the user navigates to the/adminpath.
Try out Angular coding questions on GreatFrontEnd.
-
Angular provides built-in support for internationalization (i18n) primarily through a build-time process. You mark text and attributes in your templates and code for translation using the
i18nattribute or the$localizetagged template literal.The Angular CLI command
ng extract-i18nis then used to collect all these marked messages into a translation file (like XLIFF or XMB). This file is given to translators.Once translated, you configure your
angular.jsonfile or use CLI arguments (--localize) to tell Angular which translation files to use for specific locales. When you build or serve your application for a particular locale, Angular replaces the original messages with the translated ones, creating locale-specific versions of your application. Angular also provides pipes likeDatePipe,NumberPipe, andCurrencyPipethat automatically format values based on the application's locale.
Try out Angular coding questions on GreatFrontEnd.
-
Incremental hydration is a technique used in Angular Server-Side Rendering (SSR) applications to improve performance, specifically the Time To Interactive (TTI). Instead of hydrating the entire application's DOM and attaching event listeners all at once after the client-side JavaScript loads, incremental hydration allows Angular to hydrate and make individual components interactive incrementally. This means parts of your application become interactive sooner, leading to a faster perceived performance and a better user experience, especially on slower networks or devices. It preserves the server-rendered HTML structure and attaches behavior without re-rendering the entire page.
Try out Angular coding questions on GreatFrontEnd.
-
TestBedis the primary utility in Angular's@angular/core/testingmodule used to configure and create a testing module environment. It allows you to set up the necessary components, services, imports, and providers required to test a specific part of your Angular application, such as a component or a service, in isolation or with controlled dependencies.You typically use
TestBedwithin abeforeEachblock in your test file to:- Configure a testing module using
TestBed.configureTestingModule({...}), similar to defining an@NgModule. - Create instances of components using
TestBed.createComponent(YourComponent). - Get instances of services or other injectables using
TestBed.inject(YourService).
This setup ensures that the dependencies are correctly resolved and the Angular environment is ready for testing.
Try out Angular coding questions on GreatFrontEnd.
- Configure a testing module using
-
Protractor was an end-to-end test framework specifically designed for Angular applications. It was built on top of WebDriverJS and ran tests against your application running in a real browser.
Its key advantage for Angular was its ability to automatically wait for Angular-specific operations like
$digestcycles and HTTP requests to complete before executing the next test step, making tests more reliable without manual waits. It also provided Angular-specific element locators, such asby.model,by.binding, andby.repeater.Protractor is now deprecated and is no longer the recommended E2E testing tool for Angular projects. Modern alternatives like Cypress, Playwright, and TestCafe are commonly used instead.
Try out Angular coding questions on GreatFrontEnd.
-
Component Test Harnesses, available from Angular 9 onwards as part of the Angular CDK, provide a standardized way to interact with Angular Material or CDK components within your tests. Instead of relying on fragile DOM selectors that can break when the component's internal structure changes, you use a harness object that exposes methods representing the component's public API (e.g.,
click(),isChecked(),getText()). This makes your tests more robust, readable, and maintainable by abstracting away the component's implementation details. You typically useTestbedHarnessEnvironmentin component tests to get a loader, and then use the loader to find and interact with specific component harnesses likeMatButtonHarnessorMatInputHarness.
Try out Angular coding questions on GreatFrontEnd.
-
Angular DevTools is a browser extension available for Chrome, Edge, and Firefox that provides debugging and performance profiling capabilities specifically for Angular applications. It helps developers understand the structure of their application by visualizing the component tree, inspect and modify the state of components and directives, and analyze the performance of change detection cycles to identify bottlenecks. It's an essential tool for debugging complex Angular applications and optimizing their runtime performance.
Try out Angular coding questions on GreatFrontEnd.
-
In Angular, error handling typically involves several strategies depending on the type of error. For asynchronous operations, especially HTTP requests using Observables, you use the
catchErroroperator from RxJS to intercept errors and handle them within the Observable stream. For centralized handling of HTTP errors across your application, you implement anHttpInterceptorwhere you can catch errors, log them, show notifications, or redirect users. For global runtime errors that occur outside of specific Observable streams (like template errors, lifecycle hook errors, etc.), you can provide a custom implementation of theErrorHandlerclass to catch and report these errors application-wide. It's also crucial to provide user-friendly feedback and log errors for debugging.
Try out Angular coding questions on GreatFrontEnd.
-
If you include a
<script>tag directly within an Angular component's template (.htmlfile), Angular's built-in security mechanisms, specifically sanitization, will prevent it from executing. Angular treats the template content as untrusted HTML by default. During the rendering process, the sanitization pipeline will detect the<script>tag and either remove it entirely or neutralize it, ensuring that the code inside the script does not run in the user's browser. This is a crucial security feature designed to protect your application from Cross-Site Scripting (XSS) attacks. You should implement dynamic behavior using Angular's event binding and component logic instead of inline scripts.
Try out Angular coding questions on GreatFrontEnd.
-
A service worker is a script that your browser runs in the background, separate from the main browser thread. It acts as a programmable network proxy, intercepting network requests from your web application.
In Angular, service workers are primarily used to turn your application into a Progressive Web App (PWA). They enable features like:
- Caching: Caching application assets (like HTML, CSS, JavaScript, images) and potentially API data, allowing for faster loading on repeat visits and offline access
- Offline support: Serving cached content when the network is unavailable
- Push notifications: Receiving push messages from a server (though Angular's built-in service worker mainly focuses on caching)
- Background sync: Deferring actions until the user has a stable connection
Angular provides the
@angular/pwapackage and theng add @angular/pwacommand to easily integrate a service worker into your project, automating the setup and configuration needed for caching.
Try out Angular coding questions on GreatFrontEnd.
-
In Angular animations,
state()andstyle()are functions used to define the visual appearance of an element at specific points in an animation.state(): This function defines a named state for an element, associating a name (like'open'or'closed') with a specific set of CSS styles. It takes a state name (string) and astyle()definition as arguments.style(): This function defines a set of CSS-like properties and their values that describe the appearance of an element at a particular moment. It's used withinstate(),transition(), andkeyframes()to specify styles. It takes an object literal where keys are style properties and values are their desired settings.
Together,
state()defines what a state is named and what it looks like usingstyle(), whilestyle()provides the actual visual description.import { trigger, state, style, transition, animate, } from '@angular/animations'; @Component({ selector: 'app-my-component', template: ` <button [@myAnimation]="currentState" (click)="toggleState()"> Animate Me </button> `, animations: [ trigger('myAnimation', [ // Define states using state() and style() state( 'default', style({ backgroundColor: 'blue', transform: 'scale(1)', }) ), state( 'highlighted', style({ backgroundColor: 'red', transform: 'scale(1.1)', }) ), // Define transitions between states transition('default => highlighted', [animate('300ms ease-in')]), transition('highlighted => default', [animate('300ms ease-out')]), ]), ], }) export class MyComponent { currentState = 'default'; toggleState() { this.currentState = this.currentState === 'default' ? 'highlighted' : 'default'; } }
Try out Angular coding questions on GreatFrontEnd.
-
Angular Universal is the official Angular project that enables server-side rendering (SSR) for Angular applications. Instead of the browser downloading your entire Angular application and then rendering the initial view, Universal runs your Angular app on a server (typically Node.js) to generate static HTML for the initial page load.
The main benefits are:
- Improved SEO: Search engine crawlers can easily index the fully rendered HTML content
- Faster perceived performance: Users see content sooner because the initial HTML is delivered directly, even before the full JavaScript bundle loads and bootstraps
- Better performance on low-power devices: The heavy lifting of initial rendering is done on the server
After the initial HTML is delivered and displayed, the browser downloads the full Angular application, and it "bootstraps" over the server-rendered HTML, turning the static page into a fully interactive single-page application (SPA). This process is called hydration (available from Angular 16 onwards).
Try out Angular coding questions on GreatFrontEnd.