In this course, we will explore how to use viewProviders in Angular to provide services that are only needed and used in the template of a component.
We will also see how to create and register services as a viewProviders, and we will learn how to use them in the component template.
By the end of the tutorial, you will learn deeply how to use viewProviders to create reusable components that can be shared across your application.
Table of Contents
Providers Vs ViewProviders in Angular
Providers
- To ensure that a single instance of a service is shared all over the application, we can configure it in the providers section of our
@NgModule. - To create a single instance of a service per component and share it with all the component’s view children and content children, we can configure it on the providers’ property of the component decorator
ViewProviders
- In order to create a single instance of a service per component and make it available exclusively to the component’s view children, and not its content children, we should configure it on the
viewProvidersproperty of the component decorator
ViewProviders are defined in the same way as providers, but they are registered using the
viewProvidersproperty of the@Componentdecorator, instead of theprovidersproperty of the@NgModuledecorator.
ViewProviders Example
Here’s an example of how to use ViewProviders to share a service with only view children :
Let’s say you have a MyParentComponent that has a template that includes a MyChildComponent.
The MyChildComponent has a template that includes a MyGrandChildComponent.
You want to share a service called MySharedService with the MyGrandChildComponent only, but not the MyChildComponent.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MySharedService {
// service methods and properties go here
}
Next, in your MyParentComponent you would configure the MySharedService on the viewProviders property of the component decorator.
This will make the service only visible to the component’s view and not its content children.
import { Component } from '@angular/core';
import { MySharedService } from './my-shared.service';
@Component({
selector: 'app-my-parent',
template: `
<app-my-child>
<app-my-grandchild></app-my-grandchild>
</app-my-child>
`,
viewProviders: [MySharedService]
})
export class MyParentComponent {
// component methods and properties go here
}
In this example, MySharedService is only available to MyGrandChildComponent because it is only view child of MyParentComponent but not for MyChildComponent because it is a content child of MyParentComponent.
You can then use the service in the MyGrandChildComponent by injecting it in the constructor and using its methods or properties in the component’s class.
import { Component } from '@angular/core';
import { MySharedService } from './my-shared.service';
@Component({
selector: 'app-my-grandchild',
template: `
<p>My Grandchild</p>
`
})
export class MyGrandChildComponent {
constructor(private shared: MySharedService) {
console.log(shared.someProperty) // this will work
}
}
It’s worth mentioning that if you make a service available to the view children by configuring it on the viewProviders property,also you can make it available to the parent component and the whole application by configuring it on the providers property in the module where the component is declared.
Summary
In Angular, the concept of a "view" refers to the set of components and directives that are projected into a particular viewport.
To provide different classes for the same token used in a component and its content children, you should use the "providers" array to provide objects specifically to the content children, and the "viewProviders" array to provide an object to the current view, as well as its child components and their corresponding view children.
This allows for greater flexibility and control over the dependencies injected into different parts of the component tree.
Using the "providers" array for content children and "viewProviders" for the current view allows you to ensure that the correct dependencies are available to the expected parts of the component tree, making it a more organized and maintainable way to manage dependencies.
References and Links
Here are more related references and links that discuss the same subject:
- View providers documentation
- Angular Documentation
- Dependency injection in Angular
- How to use Services in Angular ?
- How to use Providers in Angular ?
- Using Injector , @Injectable & @Inject in Angular
- How to create a singleton service in Angular ?
- Using provideIn root , any & platform in Angular ?
- How to use ViewProviders in Angular ?
- Using @Self , @SkipSelf & Optional Decorators in Angular
- How to use APP_INITIALIZER provider in Angular ?