In an Angular2, how can you inject different data-services into each component

Question

Say you have a standard TodoList app.

There is an app component, which "provides" a TodoStore service which manages(gets/sets/modifies) all the data.

You create AppComponent which "provides" this TodoStore and you inject this into your TodoListComponent. Everything works as expected.

Now, the customer, for some reason wants to have TWO TodoListComponent, side by side. Because components are meant to be reusable and composable, this is a valid use case.

But how would you provide a different TodoStore into the two components? Or is my design fundamentally flawed?

Answer 1

You can wrap your TodoListComponent with different components that provide different services.

@Component({
  selector: 'todo-list-1',
  providers: [{provide: TodoStore, useFactory: (...) => new TodoStore(...), deps: [...]}],
  template: '<todo-list></todo-list>'
})
class TodoList1Component {}

For each different store instance use a different wrapper component.

... depend on how your store needs to be created (you didn't provide the details).