transferstate.ts

import {Inject, Component, OnInit, Injector} from '@angular/core';
import {PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser, isPlatformServer} from '@angular/common';

import {TransferState, StateKey, makeStateKey} from '@angular/platform-browser';

const COUNTER_KEY = makeStateKey<number>('counter');

@Component({
  template: `
    {{counter}}
  `,
  styles: []
})
export class InstanceDetailComponent implements OnInit {

  public counter: number = 0;

  constructor(private transferState: TransferState, private injector: Injector, @Inject(PLATFORM_ID) private platformId: Object) {
  }

  ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      // Set it to 5 in the server.
      this.counter = 5;
      this.transferState.set(COUNTER_KEY, 50);
      console.log(this.transferState);
    } else {
      console.log(this.transferState);
      // Get the transferred counter state in the client(should be 50 and not 0).
      this.counter = this.transferState.get(COUNTER_KEY, 0);
    }
  }

}