Overriding an existing construct

There are cases when you want to override the default resolution of your construct. You can do so at the module level, but also at the component level. What you do is simply express which construct you are overriding and with which other construct. It looks like this:

@Component({
  providers: [
    { provide: Service, useClass : FakeService }
  ]
})

The provide is our known construct and useClass is what it should point to instead. Let's imagine we implemented our Service like so:

export class Service {
  no: number = 0;
  constructor() {}
}

And we added the following override to a component:

@Component({
  providers: [{ provide : Service, useClass: FakeService }]
})

The FakeService class has the following implementation:

export class FakeService {
  set no(value) {
    // do nothing
  }

  get no() {
    return 99;
  }
}

Now the component and all its view child components will always get FakeService when asking for the Service construct.