[Angular] Difference between Providers and ViewProviders

For example we have a component:

class TodoList {
  private todos: Todo[] = [];

  add(todo: Todo) {}

  remove(todo: Todo) {}

  set(todo: Todo, index: number) {}

  get(index: number) {}

  getAll() {}
}

@Component({
  // ...
  viewProviders: [TodoList]
  // ...
})
class TodoAppComponent {
  constructor(private todos: TodoList) {}
  // ...
}

For TodoAppComponent, we make 'TodoList' as 'viewProviders'. 

And inside TodoAppComponent, we have TodoInputComponent & TodoComponent as view children, and AppFooterComponent as content child:

@Component({
  selector: 'todo-app',
  template: `
    <section>
      Add todo:
      <todo-input (todo)="addTodo($event)"></todo-input>
    </section>
    <section>
      <h4 *ngIf="todos.getAll().length">Todo list</h4>
      <todo *ngFor="let todo of todos.getAll()" [todo]="todo">
      </todo>
    </section>
    <ng-content select="app-footer"></ng-content>
  `
})

 

So now, if we want to inject TodoList into TodoInputComponent and TodoComponent, that's fine. But once we try to inject TodoList service into FooterComponent, it will show the error:

ORIGINAL EXCEPTION: No provider for TodoList!

This is because when we use 'viewProviders' we can only inject service into component and its view children. Content Children (passed in by ng-content) cannot be injected.

 

When to use viewProviders?

Why would I use viewProviders, if such providers are not accessible by the content children of the component? Suppose you’re developing a third-part library, which internally uses some services. These services are part of the private API of the library and you don’t want to expose them to the users. If such private dependencies are registered with providers and the user passes content children to any of the components exported by the public API of your library, she will get access to them. However, if you use viewProviders, the providers will not be accessible from the outside.