Creating Angular 4 Services Using @Injectable In 5 Minutes

0

At the time of developing angular apps, you might require to use your code on multiple components or pass the data between components or perform the database operations.That’s the time you should use Angular 4 services.

If you’ve already worked on Angular 1.x and 2.x, I’m sure that you’re aware of angular services.

Now, let’s see how we can utilize services in Angular 4.

What is Angular service?

Angular services are the common functions that we can use on any components by importing that particular service in component.

Basically, it used for making our code reusable. So, whenever we write some code like database operations. we just need to create a service and that can be used throughout the application.

Services not only help us to manage reusable codes but also we can structurize our app in a standard manner.

How to create service in angular 4?

This tutorial will help you to create and use the service.

First of all, let’s create a service in Angular 4 app.

If you’re not aware of setting up Angular apps, visit, Build Your First Angular App

ng g s databaseOperations

Now, to use created service, first import in the App module.

app.module.ts

// Other imports removed
import { DatabaseOperations } from './databaseOperations.service';

@NgModule({
  // Other properties removed
  providers: [DatabaseOperations],
  
})

Next, let’s work with the service class now.

It’s like a normal class with number of functions that perform certain needed tasks.

@Injectables, tell the angular that this service is having dependencies included. It’s a good practice to have Injectable all the time.

Let’s say you would like to use Http in this particular service, you should have Injectable placed and then inject that Http service in constructor.

databaseOperations.service.ts

//Import injectable
import { Injectable } from '@angular/core';
//Import Http
import {  Http } from '@angular/http';

@Injectable()
export class DatabaseOperations {
   constructor(private http: Http){}
}

Now, in service we can define the members and methods that we can use in particular component.

Here, I didn’t used Http as I don’t require it for now.

export class DatabaseOperations {

  constructor() { }
  articles = [
    'Angular 4 Hello World', 'Angular 4 Services', 'Angular 4 Basics'
  ];

  //Get the list
  listData() {
    return this.articles;
  }
}

Using Angular 4 Services in any components

To use service in component,

  • Don’t forget to import a particular service in a component.
  • Inject that service into the constructor.
  • Now, use the service using this keyword.

app.component.ts

//Import core modules
import { Component, OnInit } from '@angular/core';
//Import service
import { DatabaseOperations } from './databaseOperations.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title= "Angular 4 Services App";
  articleList: any[] = [];
  constructor(private databaseOperations: DatabaseOperations) {}

  ngOnInit() {
    console.log(this.databaseOperations.articles);
    this.articleList = this.databaseOperations.listData();
  }
}

Now, let’s pass and render the data from component to the HTML.

In HTML template, you can see the list of articles array.

app.component.html

<div>
  <h1>
    Welcome to {{title}}
  </h1>
  <p>{{ articleList }}</p>
</div>

Here we go, you’re ready with Angular 4 services app. Just run ng serve and you can see the output @ http://localhost:4200

Conclusion

Basically, Angular services are used to serve multiple components by creating a single purpose class.

Also, It allows us to communicate across the multiple components.

Suggested visits with Angular 4 Services,

I hope, you loved this article. Feel free to share your feedback/suggestions by commenting below.

Leave a Reply

avatar
  Subscribe  
Notify of