Angular Chemdoodle

A chemical structure visualization component for Angular.

This library was generated with Angular CLI version 15.2.9.

Installation

npm install @wcmc/ng-chemdoodle --save

ChemDoodle Web Components is a required dependency of this library; however, it is not distributed on NPM. The following shell script can set up ChemDoodle in your project root:

#!/bin/bash
# downloads relevant ChemDoodle Web Components to avoid redistributing
# https://web.chemdoodle.com/installation/download

# latest ChemDoodle Web Components version at the time of this relase
version="9.2.0"

# create lib directory
mkdir -p lib/ChemDoodleWeb
cd lib

# download and extract library
wget "https://web.chemdoodle.com/downloads/ChemDoodleWeb-${version}.zip"
unzip "ChemDoodleWeb-${version}.zip"

mv "ChemDoodleWeb-${version}"/*.txt "ChemDoodleWeb-${version}"/install/* ChemDoodleWeb

# clean up
rm "ChemDoodleWeb-${version}.zip"
rm -rf "ChemDoodleWeb-${version}"

Usage

Import the library

import { NgChemdoodleModule } from '@wcmc/ng-chemdoodle';
 
@NgModule({
 // ...
 imports: [
   // ...
   NgChemdoodleModule
 ]
})

Add required scripts to the angular configuration

In angular.json under architect.build.options within your project definition, add the following styles and scripts:

"styles": [
  "./lib/ChemDoodleWeb/ChemDoodleWeb.css"
],
"scripts": [
  "./lib/ChemDoodleWeb/ChemDoodleWeb.js"
]

Use the custom component in your module

The ChemDoodle component must be contained within an element with fixed dimensions and must use a unique id and MOL data:

<div style="width: 400px; height: 400px">
  <div [libChemdoodle]="molData" id="uniqueId"></div>
</div>

@Component({
  // ..
})
export class AppComponent {
  molData = 'Molecule Name\n  CHEMDOOD08070920033D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 14 15  0  0  0  0  0  0  0  0  1 V2000\n   -0.3318    2.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318    1.0000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980    0.5000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342    0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640    1.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804    0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640   -1.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -1.0000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    2.0640   -0.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.7910    1.7553    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804   -0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -2.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  3  2  1  0  0  0  0\n  4  2  1  0  0  0  0\n  3  5  1  0  0  0  0\n  3  6  1  0  0  0  0\n  7  4  1  0  0  0  0\n  4  8  2  0  0  0  0\n  9  5  2  0  0  0  0\n 10  5  1  0  0  0  0\n 10  8  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 12  1  0  0  0  0\n 13  8  1  0  0  0  0\n 13 11  2  0  0  0  0\n 10 14  1  0  0  0  0\nM  END\n> <DATE>\n07-08-2009\n';
  
  // ..
}