Jumping from Angular1 to Angular

Previous: Data Binding

The Angular Dependency Injection system allows you inject, into your components, classes and values for you to use, for instance as services. _Injectable_s can be Angular services (such as the Http class), third-party services (like ngx-translate), your own classes or even object values.


In order to inject an @Injectable, you need to make sure it is registered in the Dependency Injection system. Let's find out how to declare and register injectables. If you want to create a class that is used as a singleton throughout your module, a service for instance, you should create your class and add the @Injectable decorator to it.

export class TheService {
  public publicFunction () {
    return 'I am a public function';

Then, you need to register it as a provider for the component(s) you want to use it in. You can do this by using the providers property of the @Component decorator:

import { TheService } from './the-service.ts';

  selector: 'compo',
  providers: [TheService],
class Compo {


Injecting an Injectable is done through the constructor of the class you want to inject it into.

  public router: Router,
  public theService: TheService,
  private http: Http,
  ) {

The type of the parameter is the name of the class you want to inject. Making the injectable public will make it accessible by the template.

Create your playground on
This playground was created on, our hands-on, knowledge-sharing platform for developers.
Go to