How to build an Angular 2 services ?

Posted in AngularJs By Raj On May 4, 2017

A service contains set of functionality that will help us to perform certain task, when it comes to real world scenarios an application can have more than one service and every service performs different tasks, while designing your application you need to do the proper modularization then only your Angular 2 service will be re-usable to other components

In Angular 2, if we use typescript to develop service then a service is a class that has properties and methods to perform a specific task when we compile, it produces javascript function and javascript function becomes Angular 2 service

Here, I am going cover building a simple angular 2 service, but if you are looking for more advanced one then I would recommend you to read below articles

Angular 2 service

I have used Angular CLI to generate an initial project structure and  Visual Studio Code IDE for development of component’s, if you are new to Visual Studio Code IDE then I suggest you refer this article setting up visual studio code ide for angular 2

Once, the initial project structure is generated, to create new Angular 2 component’s  and Angular 2 service we need to run below commands

The advantage with Angular 2 CLI is it automatically generates service snippet for you when you run the above commands but, I would recommend you try to understand every line so that it will help you while debugging your application

In this article, I have created initial project structure using Angular CLI but not the components and services, the components and services are manually created

Step 1:

Create a customer-service.service.ts file in app folder and  import “Injectable” decorator from the @angular/core

Step 2:

Create a class and add the @injectable decorator above the class name

Step 3:

In order to consume this service in other components, we must export this using export keyword and finally, it looks something like below

The above service contains only single method that returns custom name, for more advanced functionality refer my other article’s

Dependency Injection?

Every service must have @Injectable decoration when ever we call service from the component, if the instance is already created for the requested service then the injector container will return it automatically otherwise it creates new one and serves to the component

Creating Angular 2 component

Create a customer-component.ts file in the app folder and add below code

Step 1:

The angular 2 component is a class and it should import the component from the @angular/core module and also we need to import the CustomerService from the customer-service.service

Step 2:

In Angular 2 every component is a class, to tell Angular 2 that this class is a component, we must define @component directives just above the CustomerComponent class

Step 3:

In the constructor of component, I am getting customer name from the customerService and assign it to the local variable, this variable will be rendered on the angular template and the final code looks like below

Step 4:

Open  index.html file and add the below code

Open the app.module.ts file and update declaration with CustomerComponent and Providers with CustomerService

The main.ts file contains code which will bootstrap your app module

Now, go to the command prompt and run the “ng serve” command and you should see something like below