Back
Close

Jumping from Angular1 to Angular

VonRickroll
2,599 views
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.

Declaration

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.

@Injectable()
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';

@Component({
  selector: 'compo',
  providers: [TheService],
  ...
})
class Compo {
  ...
}

Injection

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

constructor(
  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 Tech.io
This playground was created on Tech.io, our hands-on, knowledge-sharing platform for developers.
Go to tech.io
codingame x discord
Join the CodinGame community on Discord to chat about puzzle contributions, challenges, streams, blog articles - all that good stuff!
JOIN US ON DISCORD
Online Participants