Defining Implementations of Services: Dependency Injection in Angular

I was working on a practical project using Angular 8, where I was creating a service and thinking more about how to implement SOLID principles. I decided to have an interface to define my service and a class to implement the logic. Everything was okay with that design, but a question came to my mind, "How can I implement dependency injection with my Angular component?"

In this example, I am going to use an abstract class, Let's create an abstract class, named IGreetingsService. This will be used as an Interface with a greeting method.

export abstract class IGreetingsService {

  constructor() { }

  abstract greeting(): String;

}

Now, let's create a class, GreetingsServiceImpl. This class implements the  IGreetingsService  abstract class.

xxxxxxxxxx

export class GreetingsServiceImpl implements IGreetingsService {

  constructor() { }

  greeting(): String{

    return "Pruebaa";

  };

}

At this point, we have a regular class to use as a service, but we need to add the annotation @Injectable. We have to put it at IGreetingsService.

x

@Injectable({

  providedIn: 'root', 

   useClass: GreetingsServiceImpl,

})

export abstract class IGreetingsService {

  constructor() { }

  abstract greeting(): String;

}

The magic is at the property useClass. This class is used by the Angular framework to know what concrete class has to use for dependency injection when you are using theIGreetingsService abstract class.  So we are ready to use our service into an angular component.

xxxxxxxxxx

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name: String;

  constructor(private service: IGreetingsService ) {

    this.name = this.service.greeting();

  }

}

At the moment, to create an instance of the AppComponent, Angular automatically creates an instance of GreetingsServiceImpl , instead of IGreetingsService. (Remember IGreetingsService is an abstract class).

This approach can help you in several situations; for example, think about a service using REST services to get some data, but now there is a new requirement, and you need to get the same data from session storage or local storage. You can create a new class implementing your abstract class and update the property useClass to refer to your new class. Another situation would be if you needed a different implementation on production environments and testing environments.

You can find the complete source code here:  https://stackblitz.com/edit/angular8-injectiondependency-interface.

A final note, you can define a provider in the component definition annotation to inject a specific implementation of your service. 

x

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ],

  providers :[{ provide: IGreetingsService, useClass: GreetingsServiceImpl }]

})

Further Reading

• Angular: Everything You Need to Know [Tutorials].
• About Dependency Injection.