How to use Service in Angular App

How to call service in  Angular App      

component can not fetch data directly from database. so to fetch data from database API need to call in Angular App . With the help of service we can access method and properties across other component in the entire Projects

1. For this We need a Web API which we will call in our App to access the data .

Syntax to create Service

ng generate service servicename 

API URL : http://localhost:37187/Api/ViewContact/ViewEmpDetails

This API will Return data in Json Format .

    {
        "EMPCode": "E0001",
        "EmpName": "Nagendra1",
        "Email": "Nagendra@gmail.com",
        "Salary": "2500"
    },
   {
        "EMPCode": "E0002",
        "EmpName": "Nagendra2",
        "Email": "Nagendra@gmail.com",
        "Salary": "2700"
    },


Add this Module in App.Module.ts file 

import { HttpClient } from '@angular/common/http';

and add in import array also

import:[

HttpClientModule

       ]

see this full VDO on youtube on Shubh Techno Expert  Call web API in Angular

app.component.html

Here in HTML added one button in which called a method this method GetEmpDetails() will call the service and return the data .

And taken one table to bind this data .

<h1 align = "center">How to use Service in Angular App</h1>

<button type = "button" (click) ="GetEmpDetails()"  align ="Center" >Click Me</button>

<table border ="3">

    <th>EmpName</th><th>EmpCode</th><th>Salary</th><th>Email</th>

    <tr *ngFor = "let item of EmpServiceresponse">

        <td> {{item.EmpName}}</td>

        <td>{{item.EMPCode}}</td>

        <td> {{item.Salary}}</td>

        <td>{{item.Email}}</td>

    </tr>

</table>

app.component.ts

in app.component we have created the method to call the service . and initiated the service in constructor .

import { Component } from '@angular/core';

import {EmpserviceService} from './empservice.service'

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'MyService';

EmpServiceresponse : any ;

  constructor(private _EmpserviceService:EmpserviceService ){}

GetEmpDetails(){

  this._EmpserviceService.GetEmployeDetails().subscribe((respp)=>

  {

    this.EmpServiceresponse = respp;

    console.log(this.EmpServiceresponse);

  })

}

}

empentities.ts

This is the Entities in which data will be mapped.

export class Empentities {

    EMPCode: string;

    EmpName: string;

    Email: string;

    Salary : number;

}

empservice.service.ts

we have created this service by below command 

ng g service Empservice

once service is created then we will provide API url and call it in a method and provide its return type as JSON

import { Injectable } from '@angular/core';

import { HttpClient , HttpResponse, HttpHeaders } from '@angular/common/http';  

import { Empentities } from './model/empentities';

import { Observable } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class EmpserviceService {

  

 url = 'http://localhost:37187/Api/ViewContact/';  

  constructor(private http:HttpClient) { }

  GetEmployeDetails(): Observable<Empentities[]> {  

    

    return this.http.post<Empentities[]>(this.url+'/ViewEmpDetails', 

    {headers:new HttpHeaders({'Content-Type':'application/json'})});

  }  

}

app.module.ts

In App.module we will register our service and add the HttpClientModule Module in Import array .

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

import { EmpserviceService } from './empservice.service';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

  ],

  providers: [HttpClientModule,EmpserviceService],

  bootstrap: [AppComponent]

})

export class AppModule { }

output

click on Button you will get the reponse 

Right click chosse inpect Element  and see the response on Console

Follow us :   Shubh Techno Expert on Youtube