Ng-whiteboard-nl NPM

ng-whiteboard-nl

Lightweight angular whiteboard Demo

Features:

Supports touch.
Custom colors.
Custom background colors. Thanks to Nader Magdy
Custom background images.
Custom stroke size.
Save drawn as (svg | png | jpeg) images.
Experimental (undo-redo).

And more to come...

Install

Install npm module:
```
npm install ng-whiteboard-nl --save
```

Add the module to your project

import { NgWhiteboardModule } from 'ng-whiteboard-nl';
...

@NgModule({
    imports: [
        ...
        NgWhiteboardModule
    ]
    ...
)}

Insert the Whiteboard Component element in the html.
```
<ng-whiteboard></ng-whiteboard>
```

Options

Input	Type	Default	Required	Description
color	`string`	`#000000`	no	Set brush color
backgroundColor	`string`	`#ffffff`	no	Set whiteboard background color
size	`string`	`5px`	no	Set brush size
linejoin	`string`	`round`	no	Define the shape of two lines when joined together ('miter' , 'round' , 'bevel' , 'miter-clip' , 'arcs')
linecap	`string`	`round`	no	Define start and end shape of line ('butt', 'square' , 'round')
whiteboardOptions	`WhiteboardOptions`		no	Object of all inputs

Outputs

Name	Description
(init)	Fired on Component initialize
(save)	Fired on Saving, include base64
(clear)	Fired on clearing
(erase)	Fired on Cleaning
(undo)	Fired on undoing last draw
(redo)	Fired on Repainting last draw

Methods

Name	ARGS	Defaults	Description
save	name: string, format: string	name: 'New image', format: 'png'	Save current board
erase	null	null	Clean the whiteboard
undo	null	null	Undo last line
redo	null	null	Repaint last line
addImage	image: (string; ArrayBuffer)	null	add images to the board

to use these Methods inject NgWhiteboardService in your project

import { NgWhiteboardService } from 'ng-whiteboard-nl';
...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
   ...
)}

  constructor(private whiteboardService: NgWhiteboardService) {
   this.whiteboardService.save();
  }