Skip to main content

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!!
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

Angular 7 and 8 Validate Two Dates - Start Date & End Date

In this example, I am sharing “ How to compare or validate two dates in Angular? ” using custom validation function in Angular 7 and Angular 8 . Here, I’m validating the two dates  - a start date and end date. The end date should be greater than the Start date”. Let’s see the example :- import { Component , OnInit } from '@angular/core' ; import { UserRequest } from '../model/user' ; @ Component ({   selector: 'User_Cal' ,   templateUrl: './usercal.component.html' ,   styleUrls: [ './usercal.component.css' ] }) export class UserCalComponent implements OnInit {   constructor ( private EncrDecr : EncrDecrService , private   http :  HttpClient ,               private datePipe : DatePipe ) {                            }   //model class   model = new UserRequest ( null , null , null , null , null );   //Error Display   error : any ={ isError: false , errorMessage: '' };   isValid

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'.   Follow the below steps, Steps 1 –  Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like  – NPM Command  1 ->   npm install crypto-js --save NPM Command  2 ->   npm install @types/crypto-js --save Steps 2  - Add the script path in “ angular.json ” file. "scripts" : [                "../node_modules/crypto-js/crypto-js.js"               ] Steps 3 –  Create a service class “ EncrDecrService ” for  encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using  encrypt and decrypt get/set methods . import  {  Injectable  }  from   '@angular/core' ; import   *   as   CryptoJS   from   'crypto-js' ; @ Injectable ({    providedIn:   'root' }) export   class   EncrDecrS

23 Best Key Features of MVC 6 and MVC 5

What’s new In MVC 6? The Added Key Features as following as, 1. The Microsoft makes a bundle of MVC, Web API, WebPages, SignalR, that bundle we called  MVC6 . 2. The MVC 6   added new cloud computing optimization system of MVC, web API, SignalR and entity framework. 3. In MVC 6, Microsoft removed the dependency of system.web.dll from MVC 6 because it's so expensive. Typically it consumes 30K memory per request/response. 4. Right now, in MVC 6 consume 2K memory per request response. It's too small memory consume. 5. Most of the problem solved using the  Roslyn Compiler . 6 . It’s added a  Start-up  class that replaces to  global.asax  file. 7. The Session state and caching adjusts our behavior depending on your hosting environment. 8. Host agnostic and its true side-by-side deployment 9. The vNext is a cross platform and open source and it's also supported to Mac, Linux, etc. 10. It’s also added to TagHeaplers use to creating an