What are viewproviders in Angular? And what is the difference b/w providers vs viewproviders?

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.

1. If we want to share one instance of a service across the entirety of our application we configure it in providers on our NgModule.
2. If we want to have one instance of a service per component, and shared with all the component’s children, we configure it on the providers property on our component decorator. Child is a view children.
3. If we want to have one instance of a service per component, and shared with only the component’s view children and not the component’s content children, we configure it on the viewProviders property of our component decorator.

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