Angular DICOM Viewer Component based on Cornerstore

Usage no npm install needed!

<script type="module">
  import vetnowDicomviewer from '';


Dicom Viewer Component

Angular Style Guide Build Status MIT license Dependency Status devDependency Status npm version

This is an Angular 6+ 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

Add cornerstonejs dependencies

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 cornerstone-tools --save


Import DICOMViewerModule.

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

import { DicomViewerModule } from 'ng-dicomviewer';
    imports: [

Add Cornerstone modules to your build

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

            "scripts": [

(see example here)

Add component to your page

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


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

Input properties

  • enableViewerTools: a boolean true|false to indicate of viewer tools should be enabled or not. Tools include Langth, Angle, Elliptical ROI, etc...
  • 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.

DICOM Images to Display

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.