One of the thing I said that

What is an Angular Provider

An Angular provider is a singleton object that is part of the application. It is easily injected into Angular entities such as Components, Directives, Pipes, and other Providers. Since it is a Singleton object, then a provider is a super easy way to share data between different entities.

Create the Provider

The Angular CLI allows us to create a provider pretty easily:

view plain print about
1ng generate service

You'll see something like this:

Notice that 'service' is automatically appended to the file name.

Let's look at the code:

view plain print about
1import { Injectable } from '@angular/core';
4 providedIn: 'root'
6export class TestService {
8 constructor() { }

To use a provider within an Angular application, that is all you need to do. The injectable Metadata has a disclaimer

view plain print about
1providedIn: 'root'
and that will tell the Angular framework to automatically set up that provider at the root level application, making it available for all Angular entities that may need to use it.

Using a Provider

First, let's add a piece of data to the service:

view plain print about
1export class TestService {
2 myData = 'test data';
4 constructor() { }

I cut out the imports and metadata to make the code sample shorter.

To use a provider, you just list it in the constructor of your service, component, directive, or whatever needs to access this provider, like this:

view plain print about
1constructor(public testService: TestService ) {
2 console.log(this.testService.myData);
3 }

By listing the service name as an Argument to the constructor of one of these Angular classes; Angular will automatically know to inject this singleton instance whenever the new component is created. Be sure to list the constructor argument as public, or else Angular will not know to inject the singleton.

Once Angular injects it as a Singleton, then an instance variable is created named after the constructor object that can be used throughout the class code as needed. You can even reference it within a template.

For this sample, I Dumped the value inside to the console. It is a super simple, and completely boring use case, but works as a proof of principle.