Hi folks,

Let's talk about services today. These guys are extremely useful for having code that is streamlined, reusable, and readable.

You might have services for different things, for example:

• A service that holds all of your API calls.
• A service that holds a bunch of constants, like URLs.
• A service that holds a variable or observable, that other components can subscribe to read and use that data.
• Using Rxjs Behavior Subject, you can even update and subscribe to the same variable in a service through many different components.

For initial setup, I would create a folder called 'services'.
Then, in your terminal pointed to that folder, you can add the command:

ng g s service-name

Service-name can be whatever you want it to be. Like, 'authentication' or 'api-calls'. It will end up being called 'service-name.service', so don't name it something like 'authentication-service', or else you'll end up with 'authentication-service.service'.

For today's purpose, let's have a service that has a constant and an API call.

Example:

export class ApiCallService { 

constructor(private http: HttpClient) {}

const url = www.hereisadomainname.com


getDataFromDatabase() {
return this.http.get(this.url + '/data')
}

}

Now, you can use these in whatever component you want.

Ex:

export class YourComponent {
myVariable; 

//The name after private can be whatever you want, you are just assigning the service's name here.
constructor(private service: ApiCallService) {}

// You can see here, that 'service' is targeting our ApiCallService, then we can pull any variable or function directly from the service for our use!
getData() {
this.service.getDataFromDatabase().subscribe(data => console.log(data)
}

ngOnInit() {
//this is going to print the url you have in your service. You could have other data stored, like an array or object. Then you can assign the value to a variable in your component.

console.log(this.service.url)
//or
this.myVariable = this.service.url
}

}

Hopefully you can see the usefulness of a service, especially when you have a lot of code that needs to be reused in many different places.

Please leave a comment if you have any Angular tutorial requests! I'd love to see what you want to know. :)

Thanks for reading,
Julie