python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 vs. Angular 5

Angular 5 and 4 - Creating and Using Services

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';

export class DateServiceService {

  constructor() { }
  //Create a servce method to get today date.
     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(() => {
      providers: [DateServiceService]

  it('should be created', inject([DateServiceService], (service: DateServiceService) => {

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';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'Service App';

  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">
    Welcome to {{title}}!
  <img width="300" alt="Angular Logo" src="img.png">

  <h2>Today Is -</h2> {{todayDate}}

You can also see the video –
I hope you are enjoying with this post! Please share with you friends. Thank you!!

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions