Service allow share data & logic across component. Injectable decorator allow to inject service into client component.
You can inject a service into a component, giving the component access to that service class.
Configure an injector with a service provider:
The class we have created provides a service. The @Injectable() decorator marks it as a service that can be injected.
The injector is responsible for creating service instances and injecting them into classes.
You can configure injectors with providers at different levels of your app, by setting a metadata value in one of three places:
In the @Injectable() decorator for the service itself. : providedIn
In the @NgModule() decorator for an NgModule.
In the @Component() decorator for a component.
The @Injectable() decorator has the providedIn metadata option, where you can specify the provider of the decorated service class with the root injector, or with the injector for a specific NgModule.
The @NgModule() and @Component() decorators have the providers metadata option, where you can configure providers for NgModule-level or component-level injectors.
For data or logic that you want to share across components, you create a service class.
A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows your service to be injected into client components as a dependency.
