Generics in Angular services - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a generic Angular service class.

Angular

export class DataService<[1]> {
  constructor() {}
}

Drag options to blanks, or click blank then click option'

Aany

Bdata

CService

DT

Attempts:

3 left

💡 Hint

Common Mistakes

Using a lowercase or descriptive word instead of a single uppercase letter.

Using a reserved keyword as the generic parameter.

The generic type parameter is usually a single uppercase letter like T to represent a type.

2fill in blank

medium

Complete the method signature to return an Observable of the generic type.

Angular

getData(): Observable<[1]> {
  // implementation
}

Drag options to blanks, or click blank then click option'

Aany

Bstring

CT

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Returning Observable which loses type safety.

Returning a concrete type like Observable instead of the generic.

The method should return an Observable of the generic type T to keep it flexible.

3fill in blank

hard

Fix the error in the generic method to accept a parameter of generic type and return it.

Angular

processData(data: [1]): [1] {
  return data;
}

Drag options to blanks, or click blank then click option'

AT

Bstring

Cany

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using different types for parameter and return type.

Using concrete types instead of the generic type.

The parameter and return type should both use the generic type T to maintain consistency.

4fill in blank

hard

Fill both blanks to declare a generic method that returns an Observable of the generic type.

Angular

fetchItem<[1]>(id: number): Observable<[2]> {
  // implementation
}

Drag options to blanks, or click blank then click option'

AU

BT

DV

Attempts:

3 left

💡 Hint

Common Mistakes

Using different letters for the generic parameter and return type.

Using the class generic type instead of method generic type.

The method declares its own generic type U and returns an Observable of U.

5fill in blank

hard

Fill all three blanks to create a generic Angular service method that filters an array of generic items by a property value.

Angular

filterItems(items: [1][], key: keyof [2], value: any): [3][] {
  return items.filter(item => item[key] === value);
}

Drag options to blanks, or click blank then click option'

AT

DU

Attempts:

3 left

💡 Hint

Common Mistakes

Using different types for items and keys.

Using a non-generic type like any.

All blanks use the generic type T to keep the method flexible and type-safe.

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