Submodule 20.3: Services and Dependency Injection - Practice

Then add the service to the app.module.ts file as follows:

. . .
import { DishService } from './services/dish.service';
@NgModule({
. . .
 providers: [DishService],
. . .

Notice

• the import of the DishService from ./services/dish.service here.
• the declaration of this DishService as a provider.

So, if you are going to the @NgModule decorator, you see this third property here called provider. In the @NgModule we have declarations, imports and providers.
So whenever you have a service that you want to make available for all the components that are part of this module, you will specify that as a provider within the module.
So with this, my DishService now becomes available for the rest of the application. How does this happen? The Angular's dependency injector will look at this information that we have declared here and then decide that it needs to create a DishService and inject it wherever it is required.