Here is the way by which we can create your own Custom Service. To create custom service you have already installed necessary stuffs and your basic application is working with default layouts.
(1) Under your created application, find your custom module which needs implementation of service to bind data, under that create a file with name of your service like "product.service.ts"
(2) since we need to get data from service we have to first import module "HttpClient" on top like
- import { HttpClient } from '@angular/common/http';
and to make this service data behave like an Observable add below line
- import { Observable } from 'rxjs/Observable';
for make service injectable add below import statement
- import { Injectable } from '@angular/core';
(3) to make it working any where we need to mark it as injectable with below statement
@Injectable
(4) coming to the next point, its service class that we need to add just like we have added to create our custom component and create constructor to fetch that data from service and use that private variable declared in constructor to your method
export class MyService{
private _myUrl = 'url'; - this could be your sevice url or url of your json file in your project
constructor(private _http: HttpClient){}
getMyData(){
return this._http.get(this._myUrl);
}
getMyDataString(): Observable{
return this._http.get(this._myUrl);
}
}
- getMyDataString will get data with of type IMy[] which is again a type of data which you are fetching from service so it will automatically map this with your type specified
(4) so, that's it for the creation of your custom service but to run this service we have to register it to your app.module.ts file before we can use it
(5) go to your app.module.ts file and import below
- import {HttpClientModule} from '@angular/common/http';
then in declarations part add 'HttpClientModule' to make it work in our component
(6) Upto this step we are done with our custom service, but to call this created service to your component is like below
- import your service to your component
import { MyService } from './service url';
- create constructor to call/initialize your service like below
constructor(private _myService: MyService)
{}
- since we are calling service, so it could be in your init method only and for that Angular provides built-in "ngOnInit" method which could be used like below
import {Component, OnInit} from '@angular/core';
- then for your component class should inherit OnInit class like below
export class MyClass implements OnInit{
- since we are implementing OnInit and we need to implement this to our component class as well
ngOnInit: void{
this._myService.getMyDataStrong().subscribe(data => {
this.mydata = data
},
}
this.mydata is your local variable which will hold service data and subsequent you can use this to your application to bind
Performing above steps will add your custom service to your application and you can bind/show your service data to your application
