Using the integrative genomics viewer (IGV) in Angular

igv.js is an embeddable version of the Integrative Genomics Viewer (IGV). Here I present a brief tutorial on how to add it to an Angular app.

Assuming an already running Angular app, the first thing to do is to install igv.js in your project by either including the bundle URL in your index.html

<script src="https://cdn.jsdelivr.net/npm/igv@2.10.4/dist/igv.min.js"></script>

Or installing it using npm (this is my preferred way)

$ npm install igv --save

Once that’s done, you can add IGV into your project. For example, lets create a new component with the Angular CLI

$ ng g c igv

In this newly created component, lets add a few functions to initialize IGV as well as a way to add new tracks (e.g. by URL).

igv.component.ts:

import { Component, OnInit, ViewChild, ElementRef, OnDestroy} from '@angular/core';
import * as igv from 'igv'
@Component({
   selector: 'app-igv',
   templateUrl: './igv.component.html',
   styleUrls: ['./igv.component.scss']
})
export class IgvComponent implements AfterViewInit, OnDestroy {
   @ViewChild('igvdiv') igvDiv: ElementRef;
   browser: any;
   trackUrl = 'https://www.encodeproject.org/files/ENCFF356YES/@@download/ENCFF356YES.bigWig'
   options = {
      genome: "hg19"
   };
   constructor() { }
   ngAfterViewInit() {
      this.createBrowser()
   }
   async createBrowser() {
      try {
         this.browser = await  igv.createBrowser(this.igvDiv.nativeElement, this.options)
      } catch(e) {
         console.log(e)
      }
   }
   addTrackByUrl() {
      this.browser.loadTrack({
         url: this.trackUrl,
      })
   }
   ngOnDestroy() {
      igv.removeAllBrowsers()
   }
}

Here @ViewChild is used to access the <div #igvdiv> element in the template and then create the browser within this div.

In this example, I used the minimal configuration options (i.e. stating what genome to use) as well as a single function from the browser’s API. To see the full list of configuration options and API functions, please refer to the wiki page from the igv.js authors.

The lifecycle hook ngOnDestroy() is used here to remove the browser when destroying/exiting the component to ensure it does not stay in memory.

igv.component.html:

<mat-card>
   <mat-form-field class="url-input">
      <mat-label>Clearable input</mat-label>
      <input matInput type="text" [(ngModel)]="trackUrl">
      <button *ngIf="trackUrl" matSuffix mat-icon-button aria-label="Clear" (click)="trackUrl=''">
         <mat-icon>close</mat-icon>
      </button>
   </mat-form-field>
   <button mat-button color="accent" class="add-button" (click)="addTrackByUrl()">Add Track</button>
</mat-card>
<div style="margin-top: 20px">
   <div #igvdiv></div>
</div>

*Note that here I am using some Angular Material form components, but a traditional input would work just fine.

The final product looks something like this: