Generics in Angular services - Step-by-Step Execution

Concept Flow - Generics in Angular services

Define generic service with <T>

↓

Inject service in component

↓

Call service method with specific type

↓

Service processes data as type T

↓

Component receives typed data

↓

Use typed data safely in component

This flow shows how a generic Angular service is defined, injected, called with a specific type, and returns typed data to the component.

Execution Sample

Angular

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

@Injectable({ providedIn: 'root' })
export class DataService<T> {
  private data: T[] = [];
  add(item: T) { this.data.push(item); }
  getAll(): T[] { return this.data; }
}

Defines a generic Angular service that stores and returns data of type T.

Execution Table

Step	Action	Type Parameter T	Data State	Output
1	Create DataService instance with T=string	string	data = []	No output
2	Call add('apple')	string	data = ['apple']	No output
3	Call add('banana')	string	data = ['apple', 'banana']	No output
4	Call getAll()	string	data = ['apple', 'banana']	Returns ['apple', 'banana']
5	Create DataService instance with T=number	number	data = []	No output
6	Call add(10)	number	data = [10]	No output
7	Call getAll()	number	data = [10]	Returns [10]
8	Exit	-	-	No more actions

💡 Execution stops after demonstrating generic service usage with string and number types.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	After 7	Final
data (T=string)	[]	['apple']	['apple', 'banana']	['apple', 'banana']	['apple', 'banana']	-	-	-	['apple', 'banana']
data (T=number)	-	-	-	-	[]	[10]	[10]	[10]	[10]

Key Moments - 3 Insights

Why do we specify the type when creating the service instance?

Specifying the type (like string or number) tells the service what type of data it will handle, ensuring type safety as shown in steps 1 and 5 of the execution_table.

What happens if we try to add a wrong type to the service?

TypeScript will give an error because the service expects only the specified type T, preventing mistakes before running the code, as implied by the type parameter in the execution_table.

Does the service store data separately for each type?

Yes, each instance with a different type parameter T has its own data array, as seen in the variable_tracker where data for string and number types are tracked separately.

Visual Quiz - 3 Questions

Look at the execution_table at step 4. What does getAll() return?

A ['apple']

B []

C ['apple', 'banana']

D [10]

💡 Hint

Check the Output column at step 4 in the execution_table.

At which step does the service instance with T=number add its first item?

A Step 6

B Step 5

C Step 2

D Step 7

💡 Hint

Look for the add() call with number type in the execution_table.

If we tried to add a number to the string service instance, what would happen?

A It would add the number without error.

B TypeScript would show a type error.

C The service would convert the number to string automatically.

D The service would ignore the number.

💡 Hint

Refer to the key_moments about type safety and type parameter usage.

Concept Snapshot

Generics in Angular services allow defining a service with a placeholder type <T>.
This lets the service handle data of any type safely.
When using the service, specify the type (e.g., DataService<string>).
Methods then work with that type, ensuring type safety.
Each type instance keeps its own data separately.
This helps reuse code for different data types without duplication.

Full Transcript

This visual execution trace shows how generics work in Angular services. First, a generic service is defined with a type parameter T. When creating an instance, you specify the type, like string or number. The service stores data of that type in an array. Calling add() adds items of type T, and getAll() returns all stored items. The execution table shows steps adding strings and numbers separately, tracking data arrays for each type. Key moments clarify why specifying the type is important, how type safety prevents errors, and how data is stored separately per type. The quiz tests understanding of outputs and type safety. The snapshot summarizes that generics let services handle any data type safely and reuse code efficiently.