In the first part of the beginner's guide to Angular tutorial series, you learnt what components are in Angular 4 and how to write Angular components. 

In this part of the tutorial series, you'll learn what services are in Angular and how to use them.

Getting Started

You'll start by cloning the source code from the first part of the tutorial series.

git clone https://github.com/royagasthyan/AngularComponent.git

Once you have the source code, navigate to the project directory and install the required dependencies.

cd AngularComponent
npm install

After the dependencies have been installed, start the application by typing the following command:

ng serve

You should have the application running on http://localhost:4200/.

What Are Angular Services?

In an Angular application, components deal with presenting the data to the view. Fetching data for the components to display is handled by Angular services.

Since the data fetching portion is handled separately in Angular services, it makes it easier to mock test services.

Why Angular Services?

From the official documentation:

Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service.

In this tutorial, you'll see how to create an Angular service for fetching data for an Angular component. 

Another advantage of using Angular services is that it makes it easier to share data between two separate components. 

Creating a Word Component

In this tutorial, you'll be creating a word component which would search the query word entered by the end user against an API and return the search result.

You'll be making the API call by using an Angular service. So let's get started by creating an Angular component.

Navigate to the project directory and create a folder called word. 

Inside the word project directory, create a file called word.component.html. Add the following HTML code:

<h2>
    Word Component
</h2>
<div>
    <input type="text">
</div>

Create a file called word.component.ts which would control the word.component.html template. Here is how it looks:

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

@Component({
  selector: 'word',
  templateUrl: 'word.component.html',
  styleUrls: ['word.component.css']
})
export class WordComponent {

	constructor(){

	}

}

As seen in the above code, you just created the WordComponent class which would control the word.component.html template file.

It has a @component decorator where you have defined the selector using which it would be accessible, the templateUrl, and the component styleUrls.

Once you have created the component, you need to add the component class to the NgModule.

Open the app.module.ts file inside the src/app directory and import the new WordComponent.

import { WordComponent } from './word/word.component'

Include the WordComponent inside the NgModule declarations. Here is how the app.module.ts file looks:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'
import { WordComponent } from './word/word.component'
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent,
    WordComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.html file inside the src/app folder and add the new WordComponent using the defined selector. Here is how it looks:

<div style="text-align:center">
  <word></word>
</div>

Save the above changes and restart the server. You should have the word component displayed when loading the application.

Creating the Word Service

Let's create an Angular service to query the word against a service URL which would return synonyms of the word.

You'll be using the Datamuse API for querying a keyword.

Create a file called word.service.ts inside the src/app/word folder. You'll be using the @Injectable() decorator to make the service class available for injection.

Here is how the word.service.ts file would look:

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

@Injectable()
export class WordService {

    constructor(){

    }

}

In order to make an API call, you'll be using the HTTP module. Import the HttpModule in the src/app/app.module.ts file. Here is how the file looks:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'
import { WordComponent } from './word/word.component'
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent,
    WordComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import the Http module inside the word.service.ts file to make API calls. 

import { Http } from '@angular/http';

You'll be making API calls to the following URL.

https://api.datamuse.com/words?max=10&ml=

You need to append the query keyword along with the above URL to get a maximum of 10 synonyms of the query term.

Define the variable url inside the WordService class and initialize it inside the constructor method.

export class WordService {

    url: string

    constructor(private http : Http){
        this.url  = 'https://api.datamuse.com/words?max=10&ml='
    }
}

You have declared and initialized the http variable, which you'll use while making API calls.

Define a method called search_word which would return the result of the API call as JSON. Here is how it looks:

search_word(term){
    return this.http.get(this.url + term).map(res => {
        return res.json()
    })
}

As seen in the above code, you have made a GET request to the API URL using the Angular Http module and returned the response as JSON. Here is how the word.service.ts file looks:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map'

@Injectable()
export class WordService {

    url: string

    constructor(private http : Http){
        this.url  = 'https://api.datamuse.com/words?max=10&ml='
    }

    search_word(term){
        return this.http.get(this.url + term).map(res => {
        	return res.json()
        })
    }
}

Searching the Word

Now that you have the word service ready to make the API calls, you need to define the WordService as the provider in the WordComponent.

Import the WordService in the word.component.ts file.

import { WordService } from './word.service';

Define the providers in the Angular WordComponent.

@Component({
  selector: 'word',
  templateUrl: 'word.component.html',
  styleUrls: ['word.component.css'],
  providers : [WordService]
})

Initialize the WordService inside the constructor method.

constructor(private service: WordService){

}

Define a method called search inside the word.component.ts file which would call the service method. Inside the search method, subscribe to the search_word method from the WordService.

search(term){
	this.service.search_word(term).subscribe(res => {
		this.words = res;
	})
}

Here is how the modified word.component.ts file looks:

import { Component } from '@angular/core';
import { WordService } from './word.service';

@Component({
  selector: 'word',
  templateUrl: 'word.component.html',
  styleUrls: ['word.component.css'],
  providers : [WordService]
})
export class WordComponent {

    words : any;
	constructor(private service: WordService){

	}

	search(term){
		this.service.search_word(term).subscribe(res => {
			this.words = res;
		})
	}

}

Add the enter key press event to the input element in the word.component.html file.

<input #query (keyup.enter)="search(query.value)" type="text">

After entering a query term when the user presses the enter key, it would make a call to the search method in the word.component.ts file.

As seen in the search method inside the word.component.ts file, you are collecting the response inside the words variable as a list. So let's iterate the words list and display in the word.component.html file. 

Modify the word.component.html file as shown:

<div>
	<ul>
		<li *ngFor="let item of words">
			{{item.word}}
		</li>
	</ul>
</div>

Save the above changes and restart the server. Enter a keyword and press the enter key, and you should have the result populated as a list.

Wrapping It Up

In this tutorial, you learnt what Angular services are. You learnt how to create Angular services and use them from an Angular component. You created a Word component which queries the entered keyword against an Angular service and displays the returned data in the component template file.

How was your experience learning Angular services? Do let us know your thoughts and suggestions in the comment section below.

Source code from this tutorial is available on GitHub.