Introduction to Angular Services

In this Angular Services tutorial, we will show you how to build a simple component that fetches list of products from an Angular Service and displays it in our template

Applies to : Angular 2, Angular 4, Angular 5, Angular 6, Angular 7, Angular 8

Our components need to access to data. You can write data access code in each component, but that is very inefficient and breaks the rule single responsibility. The Component must focus on presenting data to the user. The task of getting data from the back end server must be delegated to some other class. Such class is called service class. Because it provides the service of providing data to the every component that needs it.

What is an Service

Service is a piece of reusable code with a focused Purpose. A code that you will use it in many components across your application

What services are used for

Features that are independent of components such a logging services
Share logic or data across components
Encapsulate external interactions like data access

Advantageous of Service

Services are easier Test.
Services are easier to Debug.
You can reuse the service.

How to create a Service in Angular

An Angular service is simply a Javascript function. All we need to do is to create a class and add methods & properties. We can then create an instance of this class in our component and call its methods.

One of the best uses of services is to get the data from the data source. Let us create a simple service, which gets the product data and passes it to our component.

You can download the source code from gitHub.

Recommended Books:

The Best Books On Angular.

The 8 Best Angular Books, which helps you to get started with Angular.

Product

Create a new file under the folder src/app and call it product.ts


export class Product { 

    constructor(productID:number,    name: string ,   price:number) {
        this.productID=productID;
        this.name=name;
        this.price=price;
    }

    productID:number ;
    name: string ;
    price:number;

}

export class Product {

constructor(productID:number, name: string , price:number) {

this.productID=productID;

this.name=name;

this.price=price;

}

productID:number ;

name: string ;

price:number;

}

The Product class above is our domain model.

Product Service

Next, let us build a Angular Service, which returns the list of products.

Create a new file under the folder src/app and call it product.service.ts


import {Product} from './Product'

export class ProductService{

    public  getProducts() {

        let products:Product[];

        products=[
            new Product(1,'Memory Card',500),
            new Product(1,'Pen Drive',750),
            new Product(1,'Power Bank',100)
        ]

        return products;               
    }
}

import {Product} from './Product'

export class ProductService{

public getProducts() {

let products:Product[];

products=[

new Product(1,'Memory Card',500),

new Product(1,'Pen Drive',750),

new Product(1,'Power Bank',100)

]

return products;

}

First, we have imported the Product

We have created the ProductService class and exported it.

We have created a getProducts method, which returns the collection of the products. In this example, we have hard coded the products. In real life, you would send an HTTP request to your back end API to get the data

Now our service is ready.

Note that the above class is a simple JavaScript function. There is nothing Angular about it.

Invoking the ProductService

The Next step is to invoke the ProductService from the component. Open the app.componet.ts and add the following code.


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

import { ProductService } from './product.service';
import { Product } from './product';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent
{

   products:Product[];
   productService;

   constructor(){
     this.productService=new ProductService();
   }

   getProducts() {
     
     this.products=this.productService.getProducts();
   }
  
}

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

import { ProductService } from './product.service';

import { Product } from './product';

@Component({

selector: 'app-root',

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

})

export class AppComponent

{

products:Product[];

productService;

constructor(){

this.productService=new ProductService();

}

getProducts() {

this.products=this.productService.getProducts();

}

First, we have imported both Product & ProductService

In the constructor of the AppComponet, we have created the instance of the ProductSerivce

The getProducts method calls the getProducts method of the ProductService. The returned list of Products are stored in the local variable products

Template

The next step is to display the Products to user

Open the app.component.html file and add the following code


<div class="container">
    <h1 class="heading"><strong>Services </strong>Demo</h1>

    <button type="button" (click)="getProducts()">Get Products</button>

     <div class='table-responsive'>
            <table class='table'>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let product of products;">
                        <td>{{product.productID}}</td>
                        <td>{{product.name}}</td>
                        <td>{{product.price}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

</div>

<h1 class="heading"><strong>Services </strong>Demo</h1>

<button type="button" (click)="getProducts()">Get Products</button>

<thead>

<tr>

<th>Price</th>

</tr>

</thead>

<tbody>

<td>{{product.productID}}</td>

<td>{{product.name}}</td>

<td>{{product.price}}</td>

</tr>

</tbody>

</table>

</div>

We are using the bootstrap 3 to style our template here

We have added a button “Get Products”, which is hooked to getProducts method of the component class via event binding

We are displaying the returned products via ngFor directive.

Finally, run the code and click on Get Product button and see the Products are displayed.

Injecting Services into Component

In the example, we instantiated the productService in the Component directly as shown below


this.productService=new ProductService();

this.productService=new ProductService();

Directly instantiating the service as shown above has many disadvantageous

The ProductService is tightly coupled to the Component. If we change the ProductService class definition, then we need to update every code where service is used
If we want to change ProductService with BetterProductService, then we need search wherever the ProductService is used and manually change it
Makes Testing difficult. We may need to provide mockProductService for testing and use the ProductService for Production.

This problem can be solved by Angular Dependency injection. You can learn it from our next tutorial on Dependency Injection in Angular 2.

Model Driven Forms Validation

Angular Dependency Injection