Awesome

<center>ng-whiteboard</center>

<center>Lightweight angular whiteboard</center>

Demo

https://mostafazke.github.io/ng-whiteboard

Features

• Supports touch.
• Highly Customizable.
• Lightweight.
• Easy to use.
• Custom colors.
• Custom background colors.
• (Brush | Image | Line | Rect | Ellipse | Text | Eraser) Tools.
• Custom stroke size.
• Save drawn as (svg | png | jpeg | base64) images.
• Undo - Redo.

And more to come...

Installation

1. Install ng-whiteboard via:

   yarn add ng-whiteboard --save
   

   or

   npm install ng-whiteboard --save
   

2. Add the module to your project

   import { NgWhiteboardModule } from 'ng-whiteboard';
   ...
   
   @NgModule({
       imports: [
           ...
           NgWhiteboardModule
       ]
       ...
   )}
   

3. Insert the Whiteboard Component element in the html.

   <ng-whiteboard></ng-whiteboard>
   

Options

Outputs

Methods

to use these Methods inject NgWhiteboardService in your project

import { NgWhiteboardService, FormatType } from 'ng-whiteboard';
...

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

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

Contributing

The project is open for contributors! Please file an issue or make a PR:)