Angular 8 Tutorial – Create and Use of Angular 8 Services

In this tutorial, we will discuss the services in Angular 8. Services are a great way to share information among classes that don’t know each other. Angular 8 services are easy to create and use

We might come across a situation where we need some code to be used everywhere on the page. It can be for apis that needs to be shared across components, etc. Services help us achieve that. With services, we can access methods and properties across other components in the entire project.

Before start create and uses of Angular services tutorial. We need a Angular 8 Project. If you don’t know how to create a new angular 8 project. Follow this tutorial.

Why Service

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, We will learn how to create service and how to use service.

To create a service open the command line and type the below command and press enter

ng g service myservice

The command generates skeleton myservice class in src/app/myservice.service.ts The MyserviceService class will look like the following example.

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

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {

  constructor() { }
}

@Injectable() services

Here, Notice that the new service imports the Angular
Injectable module from the @angular/core and annotates the class with the @Injectable() decorator. This marks the class as one that participates in the dependency injection system. The MyserviceService class is going to provide an injectable service, and it can also have its own injected dependencies.

The @Injectable() decorator accepts a metadata object for the service, the same way the @Component() decorator did for your component classes

Create Function

Next, We will create function in the service

todayDate() {
  let ndate = new Date();
  return ndate;
}

In the above service file, we have created a function todayDate. This function will return the current date. Let us see how we can access this function in the component class.

Access the service function

Next, Open the your component where you want to access this service, I am working on app.component.ts file, So open the app.component.ts file and add the below import at the top of file.

import { MyserviceService } from './myservice.service';

Inject the Service

Add a private myservice parameter of type MyserviceService to the constructor.

constructor(private myservice: MyserviceService) {}

Next, Call the function

ngOnInit() {
  this.todaydate = this.myservice.todayDate();
}

After the above changes our app.component.ts file wil looks like this

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todaydate;

  constructor(private myservice: MyserviceService) {}

  ngOnInit() {
    this.todaydate = this.myservice.todayDate();
  }
}

The ngOnInit function gets called by default in any component created. The date is fetched from the service as shown above.

Next, To display the date on the browser open the app.component.html file and put the below html.

<div class="mt-5 ml-auto mr-auto col-md-5 text-center">
	<b>Today's  Date:</b> {{ todaydate }}
</div>

Running application:

Run the application using ng serve --o

Preview