\r\n\r\n[](https://dl.circleci.com/status-badge/redirect/gh/mostafazke/ng-whiteboard/tree/master)\r\n[](https://badge.fury.io/js/ng-whiteboard) [](https://opensource.org/licenses/MIT)\r\n[](https://www.npmjs.com/package/ng-whiteboard)\r\n\r\n## Demo\r\n\r\nhttps://mostafazke.github.io/ng-whiteboard\r\n\r\n## Features\r\n\r\n- Supports touch.\r\n- Highly Customizable.\r\n- Lightweight.\r\n- Easy to use.\r\n- Custom colors.\r\n- Custom background colors.\r\n- (Brush | Image | Line | Rect | Ellipse | Text | Eraser) Tools.\r\n- Custom stroke size.\r\n- Save drawn as (svg | png | jpeg | base64) images.\r\n- Undo - Redo.\r\n\r\n**_And more to come_...**\r\n\r\n## Installation\r\n\r\n1. Install `ng-whiteboard` via:\r\n\r\n ```bash\r\n yarn add ng-whiteboard --save\r\n ```\r\n\r\n or\r\n\r\n ```bash\r\n npm install ng-whiteboard --save\r\n ```\r\n\r\n2. Add the module to your project\r\n\r\n ```typescript\r\n import { NgWhiteboardModule } from 'ng-whiteboard';\r\n ...\r\n\r\n @NgModule({\r\n imports: [\r\n ...\r\n NgWhiteboardModule\r\n ]\r\n ...\r\n )}\r\n ```\r\n\r\n3. Insert the Whiteboard Component element in the html.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n## Options\r\n\r\n| Input | Type | Default | Description |\r\n| ----------------- | ---------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------- |\r\n| [data] | [[WhiteboardElement](projects\\ng-whiteboard\\src\\lib\\models\\whiteboard-element.model.ts)] | [] | The whiteboard data |\r\n| [options] | [WhiteboardOptions](projects\\ng-whiteboard\\src\\lib\\models\\whiteboard-options.model.ts) | null | component configuration object, properties described below |\r\n| [drawingEnabled] | boolean | true | Enable mouse/touch interactions |\r\n| [selectedTool] | ToolsEnum | ToolsEnum.BRUSH | The current selected tool |\r\n| [canvasWidth] | number | 800 | The width of whiteboard canvas |\r\n| [canvasHeight] | number | 600 | The height of whiteboard canvas |\r\n| [fullScreen] | boolean | true | if true change (canvasWidth, canvasHeight) to fit the parentainer |\r\n| [strokeColor] | string | #000000 | The default stroke color |\r\n| [backgroundColor] | string | #FFFFFF | The default background color |\r\n| [fill] | string | #333333 | The default fill color |\r\n| [strokeWidth] | number | 2 | The default stroke width |\r\n| [zoom] | number | 1 | Zoom level |\r\n| [fontFamily] | string | sans-serif | The default font family |\r\n| [fontSize] | number | 24 | The default font size |\r\n| [center] | boolean | true | Center the canvas in parent component, works with fullScreen: false |\r\n| [x] | number | 0 | if center is false, set the X axis |\r\n| [y] | number | 0 | if center is false, set the Y axis |\r\n| [enableGrid] | boolean | false | Enable the grid pattern |\r\n| [gridSize] | number | 10 | Set the grid inner boxes size |\r\n| [snapToGrid] | boolean | false | Enable snaping to grid |\r\n| [lineJoin] | LineJoinEnum .ROUND | LineJoinEnum | The default Line join |\r\n| [lineCap] | LineCapEnum .ROUND | LineCapEnum | The default Line cap |\r\n| [dasharray] | string | '' | The default dash-array |\r\n| [dashoffset] | number | 0 | The default dash-offset |\r\n\r\n## Outputs\r\n\r\n| Name | Description | Arguments |\r\n| --------------- | ------------------------------------------------ | ------------------------ |\r\n| (ready) | Emitted when the component is ready | None |\r\n| (dataChange) | Emitted when the data is changed | WhiteboardElement[] |\r\n| (clear) | Emitted when the canvas is cleared | None |\r\n| (undo) | Emitted when the user undo an action | None |\r\n| (redo) | Emitted when the user redo an action | None |\r\n| (imageAdded) | Emitted when the user add an image to the canvas | None |\r\n| (save) | Emitted when the user save the canvas | base64 image |\r\n| (selectElement) | Emitted when the user select/deselect an element | WhiteboardElement / null |\r\n| (deleteElement) | Emitted when the user delete an element | WhiteboardElement |\r\n| (toolChanged) | Emitted when the user change the tool | ToolsEnum |\r\n\r\n## Methods\r\n\r\n| Name | Description | Arguments | Defaults |\r\n| -------- | ----------------------- | -------------------------------- | --------------------------------------- |\r\n| save | Save the current board | [format]: string, [name]: string | [format]: 'base64', [name]: 'New board' |\r\n| addImage | Add images to the board | image: (string; ArrayBuffer) | None |\r\n| erase | Clean the whiteboard | None | None |\r\n| undo | Undo last action | None | None |\r\n| redo | Redo last action | None | None |\r\n\r\nto use these Methods inject NgWhiteboardService in your project\r\n\r\n```typescript\r\nimport { NgWhiteboardService, FormatType } from 'ng-whiteboard';\r\n...\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.scss']\r\n ...\r\n)}\r\n\r\n constructor(private whiteboardService: NgWhiteboardService) {\r\n this.whiteboardService.save(FormatType.Base64);\r\n }\r\n\r\n```\r\n\r\n## Contributing\r\n\r\nThe project is open for contributors! Please file an issue or make a PR:)\r\n","readmeFilename":"README.md"}
![](\"https://cdn.jsdelivr.net/gh/mostafazke/ng-whiteboard@development/projects/demo/src/assets/icons/icon-512x512.png\"){kind=icon}
\r\n