Angular 5 Services

Angular application is built from components – organized in modules with hierarchy. The component represent a user interface element with properties, methods, input and output parameters and more. When we want interaction between components we use input and output parameters but if the interaction is not between parent and child (for example 2 brothers components share functionality) it can be complex to make it using the parent. this is where Angular services help

The main idea behind a service is to provide an easy way to share code and data between components. Using dependency injection you can control how the service instances are shared

Lets start with a simple service to understand the basic concepts

To create a service use Angular CLI

Lets implement a simple random function:

To inject the service to the app component add it to the providers list in the component decorator. Declare an object and use it:

This will inject a service instance to the component

Note that if you declare 2 objects , you will get the same instance

Now lets create 2 child components Comp2, Comp3:

The component generate 2 text fields for the random limit and a button to generate a random number in the range. We inject the service to the component decorator and also do the same with comp3 that has the same code , if we put the components in the parent we get 2 different instances

If we declare the provider on the parent component or on the Module we will get the same instance and in this way we can share also data between the components:

In this example we set a different range on the components but when we generate random we get numbers from the second range (the last we set)

 

Asynchronous Operations

It is very common to use a service for asynchronous tasks – for example, creating http request. You can use a Promise object or (and better) observable

Observable is an implementation of publisher subscriber pattern, it is like a stream that you can sent multiple events and subscribe to multiple events. It is part of rxjs

Simple example

In the above example, we create an observable that generate an event every 1 second. We need to subscribe to see something happen – in this example we print a simple message and we get an index as a parameter (incremented counter)

The previous example runs forever, to limit the interval to 5 times add take:

to add other operation add do:

Note that you still have to subscribe to make things happens, we can subscribe more than once

You can also apply some operations on the observable :

 

Working With HTTP

To work with http we need to create http requests, with http we can generate:

GET request – select data (return records as Json object)

POST – insert new data

PUT – update data

DELETE – delete data

 

To make http requests, first we generate a new service

 

Add the HttpModule to the app.module.ts file

Create the service

http module provides methods for all HTTP request types – here we use get, we convert the result from Response object to a json object and cast it Book array

 

declare a class:

Build the template:

 

Add the code in the component class:

 

The new HttpClient module

One new feature of Angular 5 is the HttpClient Module that is in release version (previously was beta). It make the use of http services much more easy

Add HttpClientModule to import section in app.module

Change the service:

As you can see we don’t need to map the result and the generic function makes the casting so the code is much more clear

Tagged

Leave a Reply

Your email address will not be published. Required fields are marked *