How To Implement Angular Service With Example
In this tutorial, we are learning how to create angular service or import service as a global dependency via module and via component with example. In time we will see how to use the Angular service.
Why use Angular service
We sometimes have to use some code in our project again and again, just like we use an API call in our project instead we use Angular service which we once use in Angular service Write our own code and you can use that code anywhere through the components, it gives us ease, so we use Angular Service. We see some examples below.
Create Angular Service
To create a service, we need to make use of the command line then open your command prompt. The command for the same is −
ng g service myservice
Install successfully see below:
The files are created in the app folder as follows −
Following are the files created at the bottom - myservice.service.specs.ts and myservice.service.ts.
myservice.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyserviceService {
constructor() { }
}
In this service, the Injectable module is imported from the @angular/core. It contains the @Injectable method and a class called MyserviceService. We learn angular service We will create our service function in this class.
Before creating a new angular service, we need to include the service created in the main parent app.module.ts.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import { MyserviceService } from './myservice.service'; // <--------------Import service ---------------
@NgModule({
declarations: [
AppComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatInputModule,
MatButtonModule
],
providers: [MyserviceService], // <------------ add service -------------------
bootstrap: [AppComponent]
})
export class AppModule { }
We have imported the Service with the class name and the same class is used in the providers in the app.module.ts file. Let us now create a service function.
In the service class, we will create a function that will display today’s date and time. We can use the same function in the use component app.component.ts. How to use it in components.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyserviceService {
constructor() { }
showTodayDate() {
let newdate = new Date();
return newdate;
}
}
In the above service file, we have created a function showTodayDate. Now we will return the new Date() created. How we can access this function in the component class.
app.component.ts
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service'; // <-------------- import service---------
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myfirstproject';
todaydate: any;
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
console.log(this.todaydate);
}
}
We saw above that the ngOnInit write function gets called by default in any component created and To fetch more details of the angular service, we need to first import the service in the component ts file.
We will display the date and time in the .html file as shown below −
<h1 class="text-center mt-5">How To Implement Angular Service With Example - phpcodingstuff.com</h1>
<h2 class="text-center">{{todaydate}}</h2>
The selector of the app component is used in the app.component.html file. The contents from the above HTML file will be displayed service data in the browser as shown below −
Conclusion
We have seen above how to create and use Angular service, it is very easy, in service we write a function once and we can use it anywhere any time, so we create an angular service
I hope it can help you...
Leave a Reply