Overriding providers in the injector hierarchy

We have already learned how to use the providers property in an Angular decorator:

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
  providers: [ProductsService]
})

The preceding syntax is called class provider syntax and is shorthand for the provide object literal syntax shown below:

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
  providers: [
    { provide: ProductsService, useClass: ProductsService }
  ]
})

The provide object literal syntax consists of two properties:

• provide: It is the token that's used to configure the injector. It is the actual class that consumers of the dependency inject into their constructors.
• useClass: It is the actual implementation...