Welcome to today’s post. In today’s post I will show how to use dependency injection within Angular to provide configuration within any component within your application. Recall that dependency injection is an implementation pattern from the SOLID principle of dependency inversion that we use to decouple classes that are higher level from classes that are at a lower level. By decoupling classes and components within an application, we make the components within the application more testable. In addition, by injecting functionality into a class, we remove the dependency of the functionality from the class, with only the abstraction as a dependency. I will be showing how we use injection tokens within any class within the application so that configuration files are decoupled from the classes. Before I show how injection tokens are used, in the first section, I will show how we inject classes into other classes within Angular applications. (adsbygoogle = window.adsbygoogle || []).push({}); Dependency Injection of Components in Angular Classes In Angular applications you may have seen how dependency injection is used to inject providers into our application components. For example, the most common usage is to inject custom application services into components. One most common example is an API service class which we declare as injectable: @Injectable() export class ApiService { … constructor(private http: HttpClient) {} Then within our UI component TS file we declare the service within the constructor as a private variable which is then available for access within our class: export class BookReturnComponent implements OnInit { … constructor(private api: ApiService, … ) {} ngOnInit() { To be able to achieve this we declare our service within the app module @NgModule providers array as shown: providers: [ ApiService, … Now I will show how to setup a basic application configuration that can b