This is an Angular 8+ DICOM Web Viewer Component, based on CornerstoneJS Project.

It includes a demo app that can be tried here. Demo app source is included in the project.

Install via NPM:

npm install ng-dicomviewer --save

This component depends on cornerstonejs, so you need to also install cornerstone and cornerstoneTools modules into your project:

npm install cornerstone-core cornerstone-math dicom-parser [email protected] --save

You need to import DICOMViewerModule into your app.module.ts, and include it into your imports:

...
import { DicomViewerModule } from 'ng-dicomviewer';
...
@NgModule({
    imports: [
...
       DicomViewerModule
...
    ]
    ...

You need to manually force cornerstone libraries to be included into your build. For that you need to edit you angular.json file and add the following to the architect.build.options.scripts:

            "scripts": [
              "node_modules/cornerstone-core/dist/cornerstone.js",
              "node_modules/cornerstone-math/dist/cornerstoneMath.js",
              "node_modules/cornerstone-tools/dist/cornerstoneTools.js",
              "node_modules/dicom-parser/dist/dicomParser.js",
              "src/assets/cornerstone/lib/cornerstoneWADOImageLoader.js"
      
            ]

(see example here)

  <div style="height: 100%; width:100%;">
    <dicom-viewer [enableViewerTools]="true" style="height:100%; width:100%; margin: 10px;"></dicom-viewer>
  </div>

The component includes some input properties and a method to load/show dicom images.

• enableViewerTools: a boolean true|false to indicate if Viewer tools should be enabled or not. Tools include Langth, Angle, Elliptical ROI, etc...
• enablePlayTools: a boolean true|false to indicate if Play Clip tools should be enabled or not.
• maxImagesToLoad: maximum number of images to load for display (default: 20). If more images are set for display, they will be loaded maxImagesToLoad at a time. If value is set to 0 or -1, no image loading limit will apply.
• downloadImagesURL: optional property, if set a Download Images button will be enabled. The URI value set will be used to download all images as a .zip file.

In order to display a Study/Series one has to call the component's loadStudyImages method, passing an array of Image Ids. Those Image Ids will then be used to load images for display. Image loading uses cornerstone Image Loaders, so Image Ids must follow cornerstone requirements.

This project includes a demo application that allows one to select DICOM files for display. It can be found here.

The example uses Cornerstone WADO Image Loader.