An Angular component to render gregorian chant using exsurge

Usage no npm install needed!

<script type="module">
  import exsurgeAngularBeta from 'https://cdn.skypack.dev/exsurge-angular-beta';


Exsurge Renderer for Angular

Angular component that can be used to render gregorian chant in the GABC format, either in SVG or PNG.

This component uses a fork created by Benjamin Bloomfield from the exsurge component by Fr. Matthew Spencer, OSJ.

Currently, the exsurge used by this component is at commit 95456f1e.


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 exsurge-angular. Then, on the component, just import it invoking import {ExsurgeRendererModule} from 'exsurge-angular'.

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

    <h2>Render in canvas</h2>
    <textarea [(ngModel)]="canvasTextAreaValue" rows="25"></textarea>
    <lib-exsurge-renderer source="{{canvasTextAreaValue}}" [isRenderInCanvas]="true"></lib-exsurge-renderer>
    <h2>Render in SVG</h2>
    <textarea [(ngModel)]="svgTextAreaValue" rows="25"></textarea>
    <lib-exsurge-renderer source="{{svgTextAreaValue}}" [isRenderInCanvas]="false"></lib-exsurge-renderer>

External sources: