Angular2 dependency injection abstract class

Question

I was going through the internet to find a solution to a random Angular problem and have encountered the following example:

export class AppModule {
  constructor(private router: Router, private viewportScroller: ViewportScroller) {
    this.router.events.pipe(
      filter((e: Event): e is Scroll => e instanceof Scroll),
      pairwise()
    ).subscribe((e: Scroll[]) => {
      const previous = e[0];
      const current = e[1];
      if (current.position) {
        this.viewportScroller.scrollToPosition(current.position);
      } else if (current.anchor) {
        this.viewportScroller.scrollToAnchor(current.anchor);
      } else ...
   ...

The ViewportScroller is an abstract class. I am trying to understand the dependency injection in Angular. How can I make an abstract class injectable?

Answer 1

What will be injected is actual class that extends ViewportScroller . Interfacets can serve as injection tokes as well. What will be injected is implementation of given interface provided by some (if any) provider

Answer 2

You can inject an abstract class that has a concrete implementation.

Here is how the ViewportScroller defined in Angular source code :

/**
 * Defines a scroll position manager. Implemented by `BrowserViewportScroller`.
 */
export abstract class ViewportScroller {
  // De-sugared tree-shakable injection
  // See #23917
  /** @nocollapse */
  static ɵprov = ɵɵdefineInjectable({
    token: ViewportScroller,
    providedIn: 'root',
    factory: () => new BrowserViewportScroller(ɵɵinject(DOCUMENT), window)
  });

...

And then, it is implemented by the BrowserViewportScroller :

/**
 * Manages the scroll position for a browser window.
 */
export class BrowserViewportScroller implements ViewportScroller {
  private offset: () => [number, number] = () => [0, 0];

  constructor(private document: Document, private window: Window) {}

...