Passing Additional Parameters To An Angular Service
Tags: angular, webdev, typescript, javascript
Published: 2020-01-22 14:42:37

---
title: Passing Additional Parameters To An Angular Service
published: true
date: 2020-01-17 00:00:00 UTC
tags: angular,webdev,typescript,javascript
cover_image: https://www.leonelngande.com/images/uploads/angular-cover-inverted.png
canonical_url: https://www.leonelngande.com/how-i-inject-pass-additional-parameters-into-angular-services/
---

If you want to pass additional parameters to an Angular service, what you are looking for is @Inject decorator. It helps you pass your parameters to the service through Angular’s dependency injection mechanism.

> `@Inject()` is a _manual_ mechanism for letting Angular know that a _parameter_ must be injected.
> 
> -- <cite><a href="https://angular-2-training-book.rangle.io/di/angular2/inject_and_injectable#inject">Rangle.io</a></cite>

Let’s say we’re writing a recaptcha service which requires the id of the recaptcha container in your html template, as below.

```typescript
import {Inject, Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RecaptchaService {
    constructor (private recaptchaContainerId: string) { }
}

```

Our example component:

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div id="recaptcha-container"></div>
  `,
})
export class ExampleComponent {

  constructor() { }

}

```

How do we go about properly passing in the `recaptchaContainerId` to the service? Here’s how.

 

**1 -** We make an [injection token](https://angular.io/api/core/InjectionToken) out of the `recaptchaContainerId` parameter as follows:

```typescript
import {Inject, Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RecaptchaService {
  constructor (
    // Make recaptchaContainerId an injection token
    @Inject('recaptchaContainerId') private recaptchaContainerId: string
  ) { }
}

```

> Injection tokens are a feature of Angular that allows the injection of values that don’t have a runtime representation. What we mean by this, is that you can’t inject something like an interface as it only exists as a TypeScript construct, not JavaScript. Injection tokens provide a simple mechanism to link a token, to a value, and have that value injected into a component.
> 
> -- <cite><a href="https://www.inversionofcontrol.co.uk/injection-tokens-in-angular/">Inversion of Control</a></cite>

 

**2 -** We then provide this token to the service through our component’s providers array as follows:

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div id="recaptcha-container"></div>
  `,
   providers: [
     // Provide a value to be used by Angular's dependency injection
     // machanism to pass 
    {provide: 'recaptchaContainerId', useValue: 'recaptcha-container'},
  ]
})
export class ExampleComponent {

  // We also inject our service
  constructor(private recaptchaService: RecaptchaService) { }

}

```

Note that I’ve deliberately limited the scope of the provided `recaptchaContainerId` to this component due to the nature of such a token (an element id). In another component where RecaptchaService is injected, I might be using a different id.

It’s still very ok to provide the recaptchaContainerId token in the above component’s module or the root AppModule. More [here](https://angular.io/guide/providers#limiting-provider-scope-with-components).

And that’s it! We’ve successfully passed an additional parameter to an Angular service. Found something that can be improved? Please feel free to use the comment :-).

This [Stackoverflow question](https://stackoverflow.com/questions/42396804/how-to-write-a-service-that-requires-constructor-parameters) served as a valuable guide in writing this blog post.