Adding Jmol to an Angular Application

We recently starting working on an educational website for chemistry students. The site we’re creating  will let users choose a molecule and perform calculations on it. We want to graphically display the selected molecule, and to do this we have decided to use Jmol.  If you’re unfamiliar with Jmol, its worth getting to know.  Originally developed 17 years ago, JMOL  is a very mature, actively maintained and very widely used open-source interactive molecule viewer.  When you need a molecule viewer, you should use Jmol unless you have a very good reason not to.

The “J” in Jmol stands for Java, but we want to use it in a web application. Fortunately the Jmol people have created a Javascript version just for this purpose. You can find it inside the Jmol sources, under the jsmol directory.

Our web framework of choice is Angular . Jmol, unfortunately is not entirely up to date with current frontend development practices. We needed to help it a little so that it works in an Angular application. The good news is – it’s extremely doable.

In a series of posts we’re going to describe the various things we had to do to make Jmol work in an Angular application.

Stay tuned…..

Leave a Comment