What is viewProviders in the below code? And how it differs from providers?
class Greeter {
greet(name:string) {
return 'Hello ' + name + '!';
}
}
@Component({
selector: 'greet',
viewProviders: [
Greeter
],
template: `<needs-greeter></needs-greeter>`
})
class HelloWorld {
}
In your example, there is no difference between providers and viewProviders because HelloWorld's template doesn't use <ng-content>. If you were projecting content within <ng-content>...</ng-content>, then Greeter couldn't be injected in the projected content because you're using
viewProviders: [Greeter]
If you wanted Greeter to potentially be injected into the projected content, you'd use
providers: [Greeter]
So viewProviders limits the provider to children other than projected content, while providers allows all children to use the provider. The value is that viewProviders allows you to prevent projected content from messing with your services, which could be especially useful in libraries.
share one instance of a service across the entire application -> configure it in providers of root module [AppModule]
share one instance of a service across the entire Module -> configure it in providers of that module
share one instance of a service across the entire Component -> configure it in providers of that Component
share one instance of a service across Component [only ViewChildren not ContentChildren] -> configure it in viewProviders of that Component