How To Create Angular 5 and 4 Service?
What Is an Angular Service? Angular service is a class that encapsulates some methods like GET/POST/PUT and provides it result as a service for across your application.
Stayed Informed – Angular 5 and Angular 4 Documents
Features of Service -
ü Service class is decorated with Injectable decorator.
ü Services are singleton objects.
ü Services are capable of returning the data in the form promises or observables.
ü The Injectable decorator is required only if our service class is making use of some Angular injectable like Http, Response and HttpModule service within it
ü And so on.
Angular 5 and 4 Service example -
The following Steps -
ü Steps 1 - Create an Angular Project
ü Steps 2 - Create new service
ü Steps 3 - Import the service in the app components
ü Steps 4 - Use to Imported Service to display in app HTML page
ü Steps 5 - Result
The Result looks like –
Create an Angular Project using the command – “ng new ServiceDemo”
D:\Angular>ng new ServiceDemo
Create new service using the command - “ng new DateService”
D:\Angular\ServiceDemo>ng g service DateService
create src/app/date-service.service.spec.ts (405 bytes)
create src/app/date-service.service.ts (117 bytes)
The above create service commands created two files one for service class and other one is test services class.
ü date-service.service.spec.ts
ü date-service.service.ts
And code class looks like for – “date-service.service.ts”
import { Injectable } from '@angular/core';
@Injectable()
export class DateServiceService {
constructor() { }
//Create a servce method to get today date.
getTodayDate(){
let today = new Date();
return today;
}
}
And code class looks like for – “date-service.service.spes.ts”
import { TestBed, inject } from '@angular/core/testing';
import { DateServiceService } from './date-service.service';
describe('DateServiceService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [DateServiceService]
});
});
it('should be created', inject([DateServiceService], (service: DateServiceService) => {
expect(service).toBeTruthy();
}));
});
Import the service in the app components and the use to display in the app HTML page.
The code looks like – “app.component.ts”
import { Component } from '@angular/core';
import {DateServiceService} from '../app/date-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Service App';
todayDate;
constructor(private dateService : DateServiceService){
this.todayDate = dateService.getTodayDate();
}
}
The code looks like – “app.component.html”
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" alt="Angular Logo" src="img.png">
</div>
<div>
<h2>Today Is -</h2> {{todayDate}}
</div>
You can also see the video –
I hope you are enjoying with this post! Please share with you friends. Thank you!!