osmd-angular

OpenSheetMusicDisplay Renderer for Angular

Angular component for OpenSheetMusicDisplay. Right now only the source is passed.

Usage

This project was built and tested with the following configuration:

Angular CLI: 7.3.6

Node: 10.15.1

Angular: 7.2.10

To use the component, install it with npm install osmd-angular. Then, on the component, just import it invoking import {OsmdRendererModule} from 'osmd-angular'.

On the html template, just use the tag <lib-osmd-renderer/> and pass the URL or XML source to render as below:

 
<div>
  <h1>Open Sheet Music Display Demo</h1>
  <label for="music-xml-source">URL or XML contents:</label>
  <textarea id="music-xml-source" style="width: 100%;" [(ngModel)]="musicXml" rows="10"></textarea>
  <lib-osmd-renderer source="{{musicXml}}"></lib-osmd-renderer>
</div>
 
 
 

External sources:

• https://github.com/opensheetmusicdisplay/opensheetmusicdisplay