0

I followed the instruction for installing ng2-canvas-whiteboard package, but I have a blank page. Here is what I have done:

IN Module:

import { CanvasWhiteboardModule } from 'ng2-canvas-whiteboard';

@NgModule({
    imports: [
        CanvasWhiteboardModule,
]

In Component:

import { CanvasWhiteboardComponent, CanvasWhiteboardOptions, CanvasWhiteboardUpdate } from 'ng2-canvas-whiteboard';


 viewProviders: [CanvasWhiteboardComponent],
@ViewChild('canvasWhiteboard') canvasWhiteboard: CanvasWhiteboardComponent;

public canvasOptions: CanvasWhiteboardOptions;

ngOnInit() {
            this.canvasOptions = {
                drawButtonEnabled: true,
                drawButtonClass: "drawButtonClass",
                drawButtonText: "Draw",
                clearButtonEnabled: true,
                clearButtonClass: "clearButtonClass",
                clearButtonText: "Clear",
                undoButtonText: "Undo",
                undoButtonEnabled: true,
                redoButtonText: "Redo",
                redoButtonEnabled: true,
                colorPickerEnabled: true,
                saveDataButtonEnabled: true,
                saveDataButtonText: "Save",
                lineWidth: 5,
                strokeColor: "rgb(0,0,0)",
                shouldDownloadDrawing: true
              };
        }
  sendBatchUpdate(updates: CanvasWhiteboardUpdate[]) {
    console.log(updates);
  }
  onCanvasClear() {
    console.log("The canvas was cleared");
  }
  onCanvasUndo(updateUUID: string) {
    console.log(`UNDO with uuid: ${updateUUID}`);
  }
  onCanvasRedo(updateUUID: string) {
    console.log(`REDO with uuid: ${updateUUID}`);
  }

In HTML:

<div style="height: 400px; border: 1px solid black">
        <canvas-whiteboard #canvasWhiteboard
                           [options]="canvasOptions"
                           (onBatchUpdate)="onCanvasDraw($event)"
                           (onClear)="onCanvasClear()"
                           (onUndo)="onCanvasUndo($event)"
                           (onRedo)="onCanvasRedo($event)">
        </canvas-whiteboard>
      </div>
Vega
  • 27,856
  • 27
  • 95
  • 103
MSH
  • 1
  • 1

1 Answers1

0

I was experiencing the same issue until I added the module code `import { CanvasWhiteboardModule } from 'ng2-canvas-whiteboard';

 @NgModule({
     imports: [
         CanvasWhiteboardModule,
 ]`

to the module file for the SPECIFIC page - not just in the app.module.ts file.

I.E. it needs to also be in your-page-name.module.ts

SimPHP
  • 33
  • 1
  • 8