A begginers Guide to Services in Angular

In this tutorial, we will learn about how to create and use services in a angular app with the help of examples.

What is a Service?

A service is a class that helps us to store the application logic in a separate files, so that we can reuse the same service with the other components.

For example, a counter service helps to count the number of button clicks.

Creating a service

Open your terminal and run the following command to create a service.

ng generate service clickscount

# clickscount is our service name

This above command will generate two new files in your app directory clickscount.service.ts and clickscount.service.spec.ts.

clickscount.service.ts: This is the file we use to create our service.

clickscount.service.spec.ts: It is used for testing purposes.

Let’s open our clickscount.service.ts file.

import { Injectable } from '@angular/core';
@Injectable({  providedIn: 'root'})export class ClickscountService {

  constructor() { }
}

This is the code angular generates by default let’s discuss the code we see above.

@Injectable is a decorator which accepts the object as its first argument inside that object we have a providedIn property with value root it means we are telling angular to create a single shared instance of the ClickscountService and injects it to any class we ask for it.

Now, we are adding a logic to our ClickscountService, so that we can use it in our components to count our button clicks.

Update your clickscount.service.ts with the below code.

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

@Injectable({
  providedIn: 'root'
})
export class ClickscountService {
  count = 0;
  constructor() { }

  increment() {
    this.count++;
  }

}

Using the service

Let’s use the ClickcountService inside our AppComponent to count the button clicks.

import { Component} from '@angular/core';
import { ClickscountService } from './clickscount.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent{

  constructor(private clicksCount: ClickscountService) {  }

  handleClick() {    this.clicksCount.increment();  }}

In the above code, first we imported the ClicksCountService from ./clickscount.service.ts file and we added to the constructor private clicksCount: ClickscountService it tells angular to inject the ClickscountService to this component.

<div style="text-align:center">
  <h1>No of clicks {{clicksCount.count}}</h1>  <button (click)="handleClick()">Click me</button>
</div>

Problems

Currently, we have a problem if we try to use our ClicksCountService in other components the same instance is shared among all components, so that we can get a wrong click count.

To solve this problem, we can inject a service instance in the component level instead of injecting at the root level.

Now, update your clickscount.service.ts file by removing @Injectable decorator.

export class ClickscountService {
  count = 0;
  constructor() { }

  increment() {
    this.count++;
  }

}

Injecting the service in component level

import { Component } from '@angular/core';
import { ClickscountService } from './clickscount.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ClickscountService] //  injecting component level})
export class AppComponent {
  constructor(private clicksCount: ClickscountService) {
  }

  handleClick() {
    this.clicksCount.increment();
  }
}

In the above code we have updated our AppComponent by adding a providers array with value ClickscountService so that its tells angular to inject the Clickscountservice instance in AppComponent.

Code repository