How to create and use service in Angular

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();

}

}