Angular Injector

Text version of the video
http://csharp-video-tutorials.blogspot.com/2017/08/angular-injector.html

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

Slides
http://csharp-video-tutorials.blogspot.com/2017/08/angular-injector_28.html

Angular 2 Tutorial playlist
https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6

Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

In this video we will discuss Angular Injectors. This is continuation to Part 34. Please watch Part 34 from Angular 2 tutorial before proceeding.

In Part 32 of Angular 2 tutorial we discussed what is dependency injection and how it is implemented in Angular. There are 2 simple steps to use dependency injection in Angular. For example, if you have a component that depends on a service and needs an instance of it,

Step 1 : First register the service with the angular injector
Step 2 : Specify a dependency using the constructor of your component class.

With these 2 steps in place, the angular injector will automatically inject an instance of the the service into the component's constructor when an instance of the component is created.

Angular 1 has only one global injector but in Angular 2 we have one injector at the application root level and hierarchichal injectors that parallel an application's component tree. This means in Angular 2, we have one root injector plus an injector at every component level.

If a service is registered with the root injector then that service is available for all components in our entire application including the components in lazy loaded modules. We will discuss lazy loaded modules in a later video in this series.

If a service is registered with the injector at the Application Root component level, then that service is available for all the components in the application except the components in lazy loaded modules.

If a service is regsitered with a specific component injector, then that service is available for that component and any of it's children. For example, if we register a service with Component X injector, then that service is available for Components X, Y & Z but not for Component A. Similarly if a we register a service with Component A injector, then that service is available only for Component A but not for Components X, Y & Z.

We can register a service with the angular injector using the providers property of @Component decorator or @NgModule decorator.

To register a service with the root injector use providers property of @ngModule decorator of root module (app.module.ts) or any feature module

To register a service with the injector at a component levet use providers property of @Component decorator