In this lecture, we are going to explore the different ways of injecting services by default, Angular
does not make our classes injectable.
We must tell Angular which of our classes can be injected into components.
There are three ways of making a class injectable.
We will go over each method.
For starters, we will be working in the mobile service file.
Above the class, we are decorating the class with the injectable decorator.
This decorator can be imported via the angular core package by adding this decorator to a class.
It'll tell Angular the class can be injected into a component.
This decorator has one argument, which is an object of configuration options.
We have one option called provided in.
This option will tell Angular where to expose the service by setting it to route.
The service will be injectable from the root injector, therefore it can be injected into any component
in our app.
Ninety nine percent of the time you will want to set this option to root, this is the most popular
way to make a class injectable.
However, let's go over the other two methods for making a class injectable, regardless of how classes
are injected.
We must always add the injectable decorator.
Another way of registering an injectable service is through modules and components.
If we don't want to make our service globally available, we can specify where our service can be injected
through a module or component.
First, we must remove the provided in option from the decorator.
Next, let's open the shared module file.
At the top of the file, we will import the modal service object.
We are importing the modal service object inside the shared module, since it is the only part of our
app that needs this service inside the engine module decorator.
We will add an array called providers.
We haven't had the opportunity to talk about the provider's array.
It is one of the options we glanced over in a previous section.
It's completely optional to add this option.
The providers option is an array of services.
We must declare our mobile service inside this option.
We will add the mobile service object to this option.
Let's refresh the page in their browser with the developer tools opened.
Under the console panel, the visible property will continue to be logged by registering a service with
a module.
It'll be available to components, directives and pipes declared in the same module.
Everywhere else will not have access to the service back in the ED.
I will come and tell the providers option and import statement for the modal service object.
We can register services with components, open the mobile component class file.
Typically, we would import the service.
However, we're already importing the mobile service object, we can move on to the second step, which
is to add the providers option to the component decorator.
This option will be an array of services.
We will pass in the modal service object.
Let's refresh the page one more time.
The service is still injectable, however, it can only be injected into a single component.
Thank you.
That gives us a lot of flexibility with how far a service can be injected.
You can inject services on a global level, module level or component level for this course.
We are going to stick to injecting services on a global level.
Back in our ED, we will comment out the providers option.
Do not comment the important statement for the modal service object, the constructor function needs
this object for type annotation back over to the modal service file.
We will work for the changes we made to the injectable decorator.
Our service is ready.
We will make one more change before moving forward and the modal component file, we will remove the
console statement.
We don't need it anymore.
It's time to toggle the visible property.
We will begin toggling this property in the next lecture.