Angular Universal: lifecycle hook for when window api becomes available

Question

I have implemented server-side rendering with Angular Universal. I have a method that I want to fire when the DOM is interactive and browser apis like window.navigator become available (because I want to do something with the user's locale).

Is there a lifecycle hook or some other way to listen for when I can use window.navigator?

Answer 1

I tested running my node server locally and found that ngOnInit() is a suitable place to run navigator code. ngOnInit() will get called server side but will get called again in the browser, so you need truthy checks on navigator:

ngOnInit() {
  if (this.window && this.window.navigator) {
    // do stuff
  }
}

It's worth noting I'm using a window provider to access window -

constructor(@Inject(WINDOW) private window: any) { }