Generics in Angular services - Mini Project: Build & Apply

Using Generics in Angular Services

📖 Scenario: You are building an Angular app that fetches different types of data from a server. To avoid repeating code, you want to create a generic service that can handle fetching any type of data.

🎯 Goal: Create a generic Angular service that fetches data of any type using HttpClient. Then use this service to fetch a list of users.

📋 What You'll Learn

Create a generic Angular service class called DataService with a type parameter T.

Add a method getAll() that returns an Observable of type T[].

Use Angular's HttpClient to fetch data from a URL.

Create a component that uses DataService<User> to fetch and display users.

💡 Why This Matters

🌍 Real World

Generic services reduce code duplication when fetching different data types from APIs in Angular applications.

💼 Career

Understanding generics in Angular services is important for building scalable, maintainable frontend applications in professional development.

1

Create User interface and users URL

Create an interface called User with properties id (number) and name (string). Also create a constant string variable called usersUrl with value '/api/users'.

Angular

// Define User interface and usersUrl constant
// Your code here

Hint

Use export interface User { id: number; name: string; } and export const usersUrl = '/api/users';

2

Create generic DataService class with HttpClient injection

Create an Angular injectable service class called DataService with a generic type parameter T. Inject HttpClient in the constructor and store it in a private variable called http. Also add a public string property called url.

Angular

export interface User {
  id: number;
  name: string;
}

export const usersUrl = '/api/users';

// Create generic DataService class with HttpClient injection
// Your code here

Hint

Use @Injectable({ providedIn: 'root' }) and inject HttpClient in constructor.

3

Add getAll() method to fetch data as Observable

Inside the DataService class, add a method called getAll() that returns this.http.get<T[]>(this.url).

Angular

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export interface User {
  id: number;
  name: string;
}

export const usersUrl = '/api/users';

@Injectable({ providedIn: 'root' })
export class DataService {
  public url: string;

  constructor(private http: HttpClient) {}

  // Add getAll() method here
  // Your code here
}

Hint

Use getAll(): Observable<T[]> { return this.http.get<T[]>(this.url); }

4

Use DataService<User> in a component to fetch users

Create an Angular component class called UserListComponent. Inject DataService<User> in the constructor as userService. Set userService.url = usersUrl in the constructor. Add a public property users of type User[] initialized as an empty array. In ngOnInit(), subscribe to userService.getAll() and assign the result to this.users.

Angular

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Component, OnInit } from '@angular/core';

export interface User {
  id: number;
  name: string;
}

export const usersUrl = '/api/users';

@Injectable({ providedIn: 'root' })
export class DataService {
  public url: string;

  constructor(private http: HttpClient) {}

  getAll(): Observable {
    return this.http.get(this.url);
  }
}

// Create UserListComponent class here
// Your code here

Hint

Use @Component with selector and template. Inject DataService<User> and set url. Subscribe in ngOnInit().

Practice

1. What is the main benefit of using <T> in Angular services?

easy

A. It allows the service to work with any data type without rewriting code.

B. It makes the service run faster by optimizing memory.

C. It automatically generates UI components for the service.

D. It restricts the service to only one specific data type.

Solution

1. Step 1: Understand the role of generics in Angular services

   Generics use <T> as a placeholder to allow services to handle different data types flexibly.

2. Step 2: Identify the benefit of this flexibility

   This flexibility means you don't have to rewrite the service for each data type, saving time and effort.

3. Final Answer:

   It allows the service to work with any data type without rewriting code. -> Option A

4. Quick Check:

   Generics = Flexible data types [OK]

Hint: Generics mean one service fits many data types [OK]

Common Mistakes:

• Thinking generics improve speed
• Believing generics auto-create UI
• Assuming generics limit data types

2. Which of the following is the correct syntax to declare a generic Angular service class?

easy

A. export class DataService<T> { }

B. export class DataService { }

C. export class DataService<T>() { }

D. export class DataService<T> => { }

Solution

1. Step 1: Recall the syntax for generic class declaration in TypeScript

   The correct syntax uses angle brackets after the class name with a type parameter, like class ClassName<T>.

2. Step 2: Match the syntax to Angular service class

   export class DataService<T> { } correctly shows export class DataService<T> { }, which is valid for a generic service.

3. Final Answer:

   export class DataService<T> { } -> Option A

4. Quick Check:

   Generic class syntax = class Name<T> [OK]

Hint: Generic classes use <T> right after the class name [OK]

Common Mistakes:

• Adding parentheses after <T>
• Using 'extends' without a type
• Using arrow functions for class declaration

3. Given this generic service snippet:

export class DataService<T> {
  private items: T[] = [];
  add(item: T) { this.items.push(item); }
  getAll(): T[] { return this.items; }
}

const service = new DataService<string>();
service.add('hello');
service.add('world');
console.log(service.getAll());

What will be logged to the console?

medium

A. Error: Type mismatch

B. [hello, world]

C. ['hello', 'world', undefined]

D. ['hello', 'world']

Solution

1. Step 1: Understand the generic type used

   The service is created with string as the type, so items is an array of strings.

2. Step 2: Trace the add and getAll methods

   Two strings 'hello' and 'world' are added, then getAll() returns the array with these two strings.

3. Final Answer:

   ['hello', 'world'] -> Option D

4. Quick Check:

   Generic array with strings = ['hello', 'world'] [OK]

Hint: Generic type <string> means array holds strings [OK]

Common Mistakes:

• Thinking output is unquoted strings
• Expecting extra undefined elements
• Assuming type errors at runtime

4. Identify the error in this generic Angular service code:

export class DataService<T> {
  private items: T[] = [];
  add(item: T) { this.items.push(item); }
  getAll(): T[] { return this.items; }
}

const service = new DataService();
service.add(123);

medium

A. Method getAll() should return a Promise.

B. Cannot push item to array inside the service.

C. Missing generic type argument when creating service instance.

D. Service class cannot have private properties.

Solution

1. Step 1: Check service instantiation

   The service is created without specifying the generic type <T>, so TypeScript cannot infer the type.

2. Step 2: Understand consequences of missing generic type

   Without the type, the compiler may treat T as any or cause errors, losing type safety.

3. Final Answer:

   Missing generic type argument when creating service instance. -> Option C

4. Quick Check:

   Always specify <T> when creating generic service [OK]

Hint: Always add <T> when new-ing generic services [OK]

Common Mistakes:

• Ignoring missing generic type argument
• Thinking private properties cause errors
• Expecting getAll() to return Promise

5. You want to create a generic Angular service that fetches data from an API and returns typed results. Which approach correctly combines generics with Angular's HttpClient to ensure type safety?

hard

A. Use get(url: string): Observable<any> and cast results manually after subscribing.

B. Use get<T>(url: string): Observable<T> in the service method and specify type when calling.

C. Use get(url: string): Promise<T> without generics and rely on JSON parsing.

D. Use get<T>(url: string): Observable<string> to always return strings.

Solution

1. Step 1: Understand Angular HttpClient generic method

   HttpClient's get<T> method allows specifying the expected data type for the response.

2. Step 2: Ensure type safety by specifying T when calling

   By using get<T>(url), the returned Observable emits data typed as T, ensuring compile-time checks.

3. Final Answer:

   Use get<T>(url: string): Observable<T> in the service method and specify type when calling. -> Option B

4. Quick Check:

   HttpClient generics = type-safe API calls [OK]

Hint: Use HttpClient get<T>() for typed API responses [OK]

Common Mistakes:

• Using any instead of generics loses type safety
• Casting manually after subscription is error-prone
• Returning Observable<string> ignores actual data shape