abcjs | Unofficial mirror of the abcjs project | Frontend Framework library

I like your example, nice work.

It was a big revelation when I understand how key works in React. Let me explain you what happens here.

Key tells react if a component representation in the dom is reused or not. If key remain the same it will be reused. If it changes it will be destroyed and remounted.

So when you use rowIndex as key. It remains the same and the animation works. But somehow the Midi is not refreshed. Midi has some issues, I do not know what.

When the key changes CardRow is remounted and it destrows the animation. Midi is also remounted and it works.

My solution is that I use rowIndex as key. And I added RowNotation as key to the Midi. Only Midi will be remounted. And both animation and midi works.

I don't have a sample using Angular, but here is an example with Vue: https://github.com/paulrosen/vue-abcjs-basic-demo/blob/master/src/components/HelloWorld.vue

It looks very similar to what you're doing.

The first thing I notice is that you shouldn't have the '#' in the element id that you are passing in. Perhaps that's it. So const elementName: string = name;

Here's what I would debug:

1) At the time that abcjs.renderAbc(elementName, tune, {}); is called, is there a visible element with the id elementName?

2) Look at the value of sheet that is returned. It should be an array with one item. There should be reasonable data in it. For instance, sheet[0].lines[0].staff[0].voices[0] should return an array of notes.

I have achieved access to make link method by declaring var makeLink; globally above the function wrapped in IIFE

external file:

>