Not working in angular 7

[sagarrajak]

Not working in angular 7

[sagarrajak]

package.json

  "name": "angular-camera",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "bootstrap": "^4.2.1",
    "core-js": "^2.5.4",
    "ng2-canvas-whiteboard": "^3.0.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.2",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

[sagarrajak]

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CanvasWhiteboardModule } from 'ng2-canvas-whiteboard';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CanvasWhiteboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[sagarrajak]

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  viewProviders: [CanvasWhiteboardComponent],
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  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
    };
  }   

  onCanvasUndo() {
    console.log(`Undo was called`);
  } 

  onCanvasRedo() {
    console.log('redo was called');
  }
}

[sagarrajak]

app.component.html

<canvas-whiteboard #canvasWhiteboard 
                  [options]="canvasOptions" 
                  (onBatchUpdate)="onCanvasDraw($event)" 
                  (onClear)="onCanvasClear()"
                  (onUndo)="onCanvasUndo($event)" 
                  (onRedo)="onCanvasRedo($event)">
</canvas-whiteboard>

[Peshou]

Hello, could you please specify what the error is, on first sight, I can see that the methods onCanvasDraw($event) and onCanvasClear() are not implemented in the code. But that should only fail on AOT compilation (ng serve --prod or ng build --prod) or if you actually draw or try to clear so the method will not be found.

as a second precaution, can you try adding a <div> wrapper with a fixed height over the canvas so maybe the problem is that the canvas cannot predict the total size of the parent. Try with a hardcoded height like

<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>

[Peshou]

Will close for inactivity, please reopen if this issue still happens.