How to OHIF Viewer in Angular project


I have an existing Angular project in which I wanted to embed OHIf Viewer with below functionalities:

  • User should select .DCM file from local and view it on screen (as shown in OHIF Viewer)
  • It should also has capability to connect with Google DICOM APIs.


Is there any reference example/ document available which can help to take start? This is first try with OHIF Viewer.

Have you seen these pages:

I’ve found better luck letting the OHIF viewer app run in an iframe to access local DICOM files within a Vue app. Set the iframe src to something like http://host:port/ohifviewer/local

Yes - I have gone through with these links and started using embedded viewer. In embedded viewer I am unable find an option to directly pass the .DCM file path.

Curious to know more about your approach.

v3, embedded is deprecated

v2, (master), set “StudyListFunctionsEnabled” in app-config.js to enable DCM file/folder uploading