Generics in Angular services - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does a generic Angular service behave with different types?

Consider a generic Angular service that fetches data of type T. If you inject this service twice with different type parameters, what will happen when you call the getData() method on each instance?

Angular

export class DataService<T> {
  private data: T[] = [];
  getData(): T[] {
    return this.data;
  }
}

// Usage in components
const userService = new DataService<User>();
const productService = new DataService<Product>();

const users = userService.getData();
const products = productService.getData();

A Each instance maintains its own separate data array typed to its generic parameter, so users and products are independent arrays.

B Both instances share the same data array, causing users and products to mix data types.

C The generic parameter is ignored at runtime, so both instances behave as if <code>T</code> is <code>any</code> and data types are not enforced.

D Angular throws a runtime error because generic services cannot be instantiated with different types.

💡 Hint

Think about how TypeScript generics work and how Angular creates service instances.

Each generic service instance is created separately with its own type parameter. The data array inside each instance is typed to that parameter, so they maintain separate data. Angular does not share generic type information at runtime, but each instance is independent.

📝 Syntax

intermediate

Identify the correct syntax for a generic Angular service

Which of the following code snippets correctly defines a generic Angular service that can be injected and used with different types?

A

export class ApiService<T> {
  fetch(): Observable<T[]> {
    // implementation
  }
}

@Injectable({ providedIn: 'root' })
export class ApiService<T> {}

B

@Injectable({ providedIn: 'root' })
export class ApiService {
  fetch(): Observable<T[]> {
    // implementation
  }
}

C

@Injectable
export class ApiService {
  fetch<T>(): Observable<T[]> {
    // implementation
  }
}

D

@Injectable({ providedIn: 'root' })
export class ApiService<T> {
  fetch(): Observable<T[]> {
    // implementation
  }
}

💡 Hint

Remember to decorate the class with @Injectable and place the generic parameter on the class.

The correct syntax places the generic parameter <T> on the class and decorates it with @Injectable({ providedIn: 'root' }). Option D matches this pattern.

🔧 Debug

advanced

Why does this generic Angular service cause a runtime error?

Given the following generic service code, why does Angular throw an error when injecting it into a component?

Angular

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

@Component({ selector: 'app-test', template: '' })
export class TestComponent {
  constructor(private store: StoreService<User>) {}
}

A The service's private items array is not initialized properly, causing a runtime error.

B Angular cannot inject generic services with type parameters because it uses the class type as the injection token, and generics are erased at runtime.

C The component must specify the generic type parameter when injecting the service, but it does not.

D The service is missing a providedIn property in @Injectable, so Angular cannot provide it.

💡 Hint

Think about how Angular's dependency injection works with TypeScript generics.

Angular's dependency injection uses the class constructor as the token. Since generics are erased at runtime, Angular cannot distinguish between different generic types and cannot inject a generic service with a type parameter. This causes a runtime error.

❓ state_output

advanced

What is the output of this generic service usage in Angular?

Given this generic service and component code, what will be logged to the console?

Angular

@Injectable({ providedIn: 'root' })
export class CacheService<T> {
  private cache = new Map<string, T>();
  set(key: string, value: T) {
    this.cache.set(key, value);
  }
  get(key: string): T | undefined {
    return this.cache.get(key);
  }
}

@Component({ selector: 'app-demo', template: '' })
export class DemoComponent {
  constructor(private cache: CacheService<number>) {
    this.cache.set('one', 1);
    this.cache.set('two', 2);
    console.log(this.cache.get('one'));
    console.log(this.cache.get('three'));
  }
}

A 1\nundefined

B 1\n3

C undefined\nundefined

D Error: Property 'set' does not exist on type 'CacheService<number>'

💡 Hint

Check what keys were set and what keys are retrieved.

The key 'one' was set with value 1, so get('one') returns 1. The key 'three' was never set, so get('three') returns undefined.

🧠 Conceptual

expert

Why use generics in Angular services?

Which of the following best explains the main benefit of using generics in Angular services?

A Generics enable Angular to optimize service injection performance at runtime.

B Generics force Angular to create separate service instances for each type, improving memory usage.

C Generics allow services to be reused with different data types while maintaining type safety and reducing code duplication.

D Generics automatically generate UI components based on the service's data type.

💡 Hint

Think about how generics help with code reuse and type checking.

Generics allow developers to write one service that works with many data types, keeping the code DRY and ensuring type safety. This is the main advantage in Angular services.