Angular4 & Webflow

Design help Custom code
1

Hey,

I’m trying to integrate a Webflow project with Angular4.

I’ve added the webflow.js script link at the bottom of the < body > tag and included the following JS snippet to verify the init… which works.

< script >
var webFlow = Webflow || ;
webFlow.push(function() {
console.log(“webflow ready”);
});
</ script >

However, it’s not clear how I can trigger from Angular the destroy() and ready() Webflow functions each time “a DOM refresh” happens?

window.Webflow.destroy();
window.Webflow.ready();

Any pointers would be very welcome!

Thanks,

Stephan

2

Found the solution!!

You need to get a native window handler in Angular, as follows :

import {Injectable} from '@angular/core';

function _window(): any {
  // return the native window obj
  return window;
}

@Injectable()
export class WindowRef {
  
  get nativeWindow(): any {
    return _window();
  }
}

Once done you can inject his in your constructor and call the related Webflow methods as seen in attached screen grab.

windowRef
windowRef1128×478 78.7 KB

See code in action @ Plunker - Angular2: getting hold of the window object

1 Like