How to create and use service in Angular

Question

Hi all, How to create and use service in Angular and implemented in Asp.Net core MVC application.

Mukesh Sagar · Answer

Service is used when you need to communicate with a backend of some sort to send and receive data. A service can be used in the muliple components : > ng generate service data Open up the new service file /src/app/data.service.ts and let's create the following method: export class DataService { constructor() { } firstClick() { return console.log('clicked'); } } To use this in a component, open the file /src/app/home/home.component.ts and update the code to the following: import { Component, OnInit } from '@angular/core'; import { DataService } from '../data.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) export class HomeComponent implements OnInit { constructor(private data: DataService) { } ngOnInit() { } firstClick() { this.data.firstClick(); } } The summary of the steps that are used above are as follows: - We're first importing the DataService at the top. - We're creating an instance of it through dependency injection within the constructor() function. - Then we call the method with this.data.firstClick() when the user clicks on the button.

Vikas · Answer

import { Injectable } from '@angular/core' ; import { Http, Headers, Response, RequestOptions } from '@angular/http' ; import { map, catchError } from 'rxjs/operators' ; import { home } from './Model/home.model' ; import { AppConfig } from '../../_config/app.config' ; // .Net Core Api Connection @Injectable() export class HomeServices { public apiUrl: string; constructor( private _http: Http, private _router: Router ) { this .apiUrl = new AppConfig().apiUrl; } public HomeDetails (Home: home) { const headers = new Headers ({ 'Content-Type' : 'application/json' }); const options = new RequestOptions ({ headers: headers }); return this ._http.post( this .apiUrl + 'Your Controller Name(Ex: MyHome)' , Home, options) .pipe(map((res: Response) => res.json()) ) } }

Mohanraj Kaliappan · Answer

Please Refer the below URL https://appdividend.com/2018/01/20/angular-services-tutorial-example-scratch/

How to create and use service in Angular

Answers (3)