UV with Angular 2+

[pawelprochnicki]

Is there any doc / tutorial / explanation how to use UV in Angular 2+ application?

[stephenwf]

We're putting together https:/UniversalViewer/uv-examples which contains some example integrations. This is running on version ^4.0.0-pre.16

With any integration the important step is setting up the files external to the UV. These need to be available when you deploy your site (usually a public folder or similar).

Here's an example of the files being copied from the node_modules:
https:/UniversalViewer/uv-examples/blob/master/react/package.json#L18-L21

I think we can reduce this further as we use more features of webpack.

As for the javascript side, you should be able to run:

import { init } from "universalviewer";

const uv = init(htmlElement, { manifestUri: ' ... url here ... ' });

uv.on('created', () => {
    uv.resize();
}, false);

For an Angular integration, you need 2 requirements. 1 is the htmlElement variable that gets passed to the init. That needs to be the HTML element where you want the UV to appear. In React there is a way to get a "ref" to the underlying HTML element, I expect there is something similar for Angular.

The other requirement is to get that code snippet above, init and the resize event, to run only once.

If you want to control the UV externally, then you could optionally save that uv variable to a model or similar in angular and use it in closures to bind to the UI.

[stephenwf]

Added issue to track: UniversalViewer/uv-examples#2