ChemAxon's MarvinJS integrated into Angular Forms

Changes to package.json

Add MarvinJs package from Chemaxon

AngularFormsMarvinJs/package.json

Line 21 in a6d84bd

"@chemaxon/marvinjs": "^21.3.0",

You'll need an .npmrc file to contain the package source and authentication. it should looks like this:

@chemaxon:registry=https://hub.chemaxon.com/artifactory/api/npm/npm/
//hub.chemaxon.com/artifactory/api/npm/npm/:_password=base64encodedPassword
//hub.chemaxon.com/artifactory/api/npm/npm/:username=me@company.com
//hub.chemaxon.com/artifactory/api/npm/npm/:email=me@company.com
//hub.chemaxon.com/artifactory/api/npm/npm/:always-auth=true

Changes to angular.json

Configure the angular compiler to integrate the MarvinJS bits:

AngularFormsMarvinJs/angular.json

Lines 29 to 47 in a6d84bd

	"assets": [
	"src/favicon.ico",
	"src/assets",
	{
	"glob": "**/*",
	"input": "node_modules/@chemaxon/marvinjs",
	"output": "./assets/marvin-js"
	}
	],
	"styles": [
	"node_modules/@chemaxon/marvinjs/gui/css/editor.css",
	"src/styles.scss"
	],
	"scripts": [
	"node_modules/@chemaxon/marvinjs/gui/lib/promise-1.0.0.min.js",
	"node_modules/@chemaxon/marvinjs/js/marvinjslauncher.js",
	"node_modules/@chemaxon/marvinjs/js/util.js"
	]
	},

For the sake of completeness you should do so for the test compilation also:

AngularFormsMarvinJs/angular.json

Lines 107 to 124 in a6d84bd

	"assets": [
	"src/favicon.ico",
	"src/assets",
	{
	"glob": "**/*",
	"input": "node_modules/@chemaxon/marvinjs",
	"output": "./assets/marvin-js"
	}
	],
	"styles": [
	"node_modules/@chemaxon/marvinjs/gui/css/editor.css",
	"src/styles.scss"
	],
	"scripts": [
	"node_modules/@chemaxon/marvinjs/gui/lib/promise-1.0.0.min.js",
	"node_modules/@chemaxon/marvinjs/js/marvinjslauncher.js",
	"node_modules/@chemaxon/marvinjs/js/util.js"
	]

Stuff the MarvinJS iframe into an Angular Component

See https://github.com/marcwittke/AngularFormsMarvinJs/blob/master/src/app/marvin-js/marvin-js-editor.component.ts

The template consists only of the iframe that loads editor.html. Also note, that this component implements ControlValueAccessor. Details on how this is done can be found at angular-university.

Integrate the MarvinJsEditorComponent into a form

This is straight forward how angular forms are working. Think of MarvinJS just as a input textbox on steroids that manipulates your structure string value with a little bit more knowledge about the semantics of this specific string.

See https://github.com/marcwittke/AngularFormsMarvinJs/blob/master/src/app/app.component.html

and https://github.com/marcwittke/AngularFormsMarvinJs/blob/master/src/app/app.component.ts