Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops.

Host and Visibility in Angular 2's Dependency Injection

1 min read

@PascalPrecht dives into the details of Angular 2’s dependency injection.

  • Angular 2’s DI to solve all current issues
  • more flexible; concept of host and child injectors

Definition of a binding on a <video-player> component:

@Component({
  selector: 'video-player',
  bindings: [
    PlayerService // shorthand for bind(PlayerService).toClass(PlayerService)
  ]
})
@View({ ... })
class VideoPlayer {
  ...
}

Child component PlayButton

@Component...
@View...
class PlayButton {
  constructor(playerService: PlayerService) { ... }
}

In this case the dependency for PlayerService will be searched upwards recursively. Problem: the parent component doesn’t define it.

To restrict the search to remain within the component host, we can use @Host():

...
constructor(@Host() playerService: PlayerService) { ... }

To bind a specific instance this syntax can be used:

@Component({
  selector: 'video-player',
  bindings: [
    PlayerService,
    bind(VideoService).toClass(SpecificVideoService)
  ]
})
...

Problem: we might want to give SpecificVideoService only to the <video-player>’s view itself. Child components should get VideoService as usual.

viewBindings can be used for that. They allow to control the visibility “downwards”, basically to specify which bindings are available to which child injectors (light or shadow dom).

@Component({
  selector: 'video-player',
  bindings: [
    PlayerService
  ],
  viewBindings: [
    bind(VideoService).toClass(SpecificVideoService)
  ]
})
@View({ ... })
class VideoPlayer {
  ...
}

Really cool article. Check it out!


Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus