Angular 8 : Create and Use of Angular 8

This tutorial will cover Angular 8’s services. Services allow classes to communicate with each other by sharing information. It is easy to create and utilize Angular 8 services. Let’s take a look at angular 8.

Sometimes, we might need to use the same code on every page. This could be an api that must be shared between components, etc. This is possible with services. Services allow us to access properties and methods across all components of the project.

Before you start creating and using Angular tutorial. A Angular 8 Project is required. You don’t need to know how to create an angular 8 new project. This tutorial will help you.

Why service?

Components should not fetch or save data and they shouldn’t know how to present false data. They should be able to present data and give access to services.

This tutorial will show you how to create and use service.

To create a new service, open the command line. Type the following command and hit 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

})

export class MyserviceService {Export class MyserviceService

constructor()

}

@Injectable() services

You will notice that the new service imports Angular

The @angular/core injectable module is used to annotate the class using the @Injectable() decorator. This class is now considered to be part of the dependency injection system. The Myservice Service class will provide an injectable service and can have its own injected dependencies.

The @Injectable() decorator accepts metadata objects for the service in the same manner as the @Component() decorator did with your component classes.

Create Function

Next, we will add function to the service

todayDate() {TodayDate()

let ndate = new Date()

Return ndate

}

We have added a function today Date to the service file. This function returns the current date. Let’s see how to access this function within the component class.

Get the service function

Next, open the component you wish to access the service. I am currently working on app.component.ts. Open this file and then add the following import at the top.

import MyserviceService from ‘./myservice.service’;

Inject the Service

To the constructor, add a private Myservice parameter of type MyserviceService.

constructor (private myservice: MyserviceService).

Next, call the function

ngOnInit() {ngOnInit()

this.todaydate = this.myservice.todayDate();

}

After making the changes, your app.component.ts will look 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() {ngOnInit()

this.todaydate = this.myservice.todayDate();

}

}

Any component that is created calls the ngOnInit function by default. As shown, the date is pulled from the service.

Next, open the app.component.html and paste the following html.