Understanding the Angular Injector

Slide 1

Slide 1 text

Understanding the Angular Injector eliraneliassy

Slide 2

Slide 2 text

e-square.io — Founder & CEO @ e-square.io — GDE for Angular & Web Technologies — Writer for AngularInDepth — Community leader About mySelf

Slide 3

Slide 3 text

e-square.io R3Injector

Slide 4

Slide 4 text

e-square.io ProvidedIn - new options

Slide 5

Slide 5 text

e-square.io What are Injectors? • Injector is a Key-Value map of Token -> Provider

Slide 6

Slide 6 text

e-square.io Injector - get and register

Slide 7

Slide 7 text

e-square.io Creating providers

Slide 8

Slide 8 text

e-square.io Injecting the provider

Slide 9

Slide 9 text

e-square.io Resolve the Provider - component level

Slide 10

Slide 10 text

e-square.io Resolve the Provider

Slide 11

Slide 11 text

e-square.io Resolve the Provider - Module level

Slide 12

Slide 12 text

e-square.io providedIn levels • ‘root’: The application-level injector in most apps. • ‘any’: Provides a unique instance in every module (including lazy modules) that injects the token. • ‘platform’: A special singleton platform injector shared by all applications on the page.

Slide 13

Slide 13 text

e-square.io Resolve the Provider - special decorators • @Optional() • @Host() • @SkipSelf() • @Self()

Slide 14

Slide 14 text

e-square.io Live Coding…

Slide 15

Slide 15 text

e-square.io The magic - @Injectable

Slide 16

Slide 16 text

e-square.io The magic - defineInjectable

Slide 17

Slide 17 text

e-square.io Micro-Front end? Not yet…

Slide 18

Slide 18 text

e-square.io Where else then?

Slide 19

Slide 19 text

We’re here to help you!

Slide 20

Slide 20 text

Thank You @eliraneliassy [email protected] eliraneliassy https://eliassy.dev https://e-square.io