How to display a simple abcjs sheet in an Angular application?

Question

Using the abcjs library in an Angular 7 application, I have the following template:

<div id="{{device.name}}"></div>

with the controller:

@Component({
  selector: 'midi-sheet',
  templateUrl: './sheet.component.html',
  styleUrls: ['./sheet.component.css']
})
export class SheetComponent implements AfterViewInit, OnDestroy  {

  // devices$: Observable<Array<Device>>;
  @Input() device: Device;

  constructor(
    // private storeService: StoreService,
    private sheetService: SheetService
  ) { }

  ngAfterViewInit() {
    this.createSheet();
  }

  ngOnDestroy() {
  }

  private createSheet() {
    const sheet = this.sheetService.createSheet(this.device.name);
  }

}

and its service:

export class SheetService {

  public createSheet(name: string) {
    const elementName: string = '#' + name;
    // tslint:disable-next-line: max-line-length
    const tune = 'X:1\nT: Cooley\'s\nM: 4/4\nL: 1/8\nR: reel\nK: Emin\nD2|:"Em"EB{c}BA B2 EB|~B2 AB dBAG|"D"FDAD BDAD|FDAD dAFD|\n"Em"EBBA B2 EB|B2 AB defg|"D"afe^c dBAF|1"Em"DEFD E2 D2:|2"Em"DEFD E2 gf||\n|:"Em"eB B2 efge|eB B2 gedB|"D"A2 FA DAFA|A2 FA defg|\n"Em"eB B2 eBgB|eB B2 defg|"D"afe^c dBAF|1"Em"DEFD E2 gf:|2"Em"DEFD E4|]\n';
    const sheet = abcjs.renderAbc(elementName, tune, {});
    console.log('Created a sheet for ' + name);
    return sheet;
  }

}

The console log shows the sheet is being created:

Created a sheet for VMPKOutput

and the Chrome browser console element tab shows:

<midi-sheet _ngcontent-hvr-c2="" _nghost-hvr-c4="" ng-reflect-device="[object Object]"><div _ngcontent-hvr-c4="" id="MidiThroughPort-0"></div></midi-sheet>

But there is no visible sheet in the page.

Answer 1

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.