I am writing an angular2 universal app. It has a d3 chart, but I was hoping to only render the d3 chart on the client side (browser) and not try to render it on the server. Is there an interface in angular2 universal that will only run a ponent method only on the client side?

i.e.

class ComponentWithChart implements OnInit, ngUniversalBrowser {

  elem;

  constructor( private viewContainerRef:ViewContainerRef) {}

  ngUniversalBrowserOnInit() {

    this.elem = this.viewContainerRef.element.nativeElement;

    d3.select(this.elem).append('div').style({
      'background-color':'yellow'
    });
  }
}

Is there anything like the example above that might allow me to only run the ngUniversalBrowser method only in the browser OnInit?

I am writing an angular2 universal app. It has a d3 chart, but I was hoping to only render the d3 chart on the client side (browser) and not try to render it on the server. Is there an interface in angular2 universal that will only run a ponent method only on the client side?

i.e.

class ComponentWithChart implements OnInit, ngUniversalBrowser {

  elem;

  constructor( private viewContainerRef:ViewContainerRef) {}

  ngUniversalBrowserOnInit() {

    this.elem = this.viewContainerRef.element.nativeElement;

    d3.select(this.elem).append('div').style({
      'background-color':'yellow'
    });
  }
}

Is there anything like the example above that might allow me to only run the ngUniversalBrowser method only in the browser OnInit?

• javascript
• d3.js
• angular
• angular2-universal

2 Answers 2

import { isBrowser } from 'angular2-universal';

isBrowser is a boolean that you can import in your ponent and then execute code coditionaly only if it's running on client.

if (isBrowser) {
     // this will not run on server
}

I think i got an answer. But it's a plete hack, and i'm sure they weren't intending for you to do this.

I ran into a dead-end myself (which forced me to turn off angular-universal/prerendering). My loss might be your gain.

There are particular objects that aren't available when you are pre-rendering. Mainly, "window", ie, "document.window".

Why don't you try adding a conditional statement in your ponent that checks whether the object exists. If it doesn't, load up your yellow background. Otherwise, load as normal.

I'm not sure if this means your ponent will fail to refresh when the "true" client finishes loading. But i'm sure you can set something up to watch for "window" and make it happen.

ngInit() {  
    if (!window) {
      // yellow background placeholder
    } else
      // real plumbing
    }
}