Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Consider this basic service 

Image RemovedImage Added

Notice the decorator, it marks this class as Injectable.  Now we need inject it in a desired component, see the section below.

Info
titleImportant

You must make sure your class is registered as a provider of a service.  This is done through the metadata in the @Injectable decorator declaration, the providedIn argument. 

When you provide the service at the root level, Angular creates a single, shared instance of HeroServiceand injects into any class that asks for it. Registering the provider in the @Injectable metadata also allows Angular to optimize an app by removing the service if it turns out not to be used after all.


Injecting a Service

Image Added

Make the changes to your code and see what happens when you run it (remember in this example, the HEROES entity is a predefined array of Hero objects).