What is useClass in Angular: Simple Explanation and Example

useClass in Angular is a way to tell the dependency injection system to use a specific class when providing a service. It lets you replace or customize which class Angular creates when a service is requested.

How It Works

Imagine you have a service that does a job, like a coffee machine. Normally, Angular creates one specific coffee machine when you ask for coffee. But what if you want to swap that coffee machine with a different model without changing the rest of your app? That's where useClass comes in.

With useClass, you tell Angular: "When someone asks for this service, give them an instance of this other class instead." Angular then creates the new class and uses it wherever the original service was requested. This works because Angular's dependency injection system looks at your instructions and follows them to provide the right class.

This is useful for swapping implementations, like using a mock service for testing or a special version for certain environments, without changing the code that asks for the service.

Example

This example shows how to use useClass to replace a service with a different implementation.

typescript

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

@Injectable()
class RealLogger {
  log(message: string) {
    console.log('RealLogger:', message);
  }
}

@Injectable()
class MockLogger {
  log(message: string) {
    console.log('MockLogger:', message);
  }
}

@Component({
  selector: 'app-root',
  template: `<button (click)="doLog()">Log Message</button>`,
  providers: [
    { provide: RealLogger, useClass: MockLogger }
  ]
})
export class AppComponent {
  constructor(private logger: RealLogger) {}

  doLog() {
    this.logger.log('Hello from useClass example');
  }
}

Output

When clicking the button, the console shows: "MockLogger: Hello from useClass example"

When to Use

Use useClass when you want to swap one class for another in Angular's dependency injection. This is helpful in these cases:

• Testing: Replace real services with mock versions to test components without side effects.
• Multiple implementations: Provide different versions of a service depending on environment or configuration.
• Extending functionality: Override a service with a subclass that adds or changes behavior.

It keeps your app flexible and easy to maintain by separating the service interface from its implementation.

Key Points

• useClass tells Angular which class to instantiate for a service.
• It allows swapping or overriding service implementations easily.
• Works well for testing, environment-specific services, or extending behavior.
• Does not change how you inject the service; only what class Angular creates.

Key Takeaways

useClass lets you replace a service's class in Angular dependency injection.

It is useful for testing, swapping implementations, or extending services.

You provide useClass in the providers array to tell Angular which class to use.

The rest of your app uses the service as usual without knowing about the swap.