How to use viewProviders in Angular ?

by aouidane.med.amine May 22, 2022

265,401 views 10 min read

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.

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 viewProviders property of the component decorator

ViewProviders are defined in the same way as providers, but they are registered using the viewProviders property of the @Component decorator, instead of the providers property of the @NgModule decorator.

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:

Angular Front-End web development

How to use viewProviders in Angular ?

Table of Contents

Providers Vs ViewProviders in Angular

Providers

ViewProviders

ViewProviders Example

Summary

References and Links

Using @Self, @SkipSelf & Optional Decorators in Angular

What is Change Detection in Angular ?

You may also like