How to add Painterro into Angular app

Here we will integrate Painterro painting library into the Angular app with a couple of easy steps which you can repeat within 3 minutes 😉

My environment:

$ node -v
v12.22.1
$ npm -v
7.11.1

Install Angular:

sudo npm install -g @angular/cli

Create a new angular project

ng new pad
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

Enter dir and open VSCode:

cd pad
code .

Install Painterro (open Terminal in pad folder):

npm i painterro --save

I got the next versions of dependencies:

  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4",
    "painterro": "^1.2.61",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.3",
    "@angular/cli": "~12.2.3",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }

Open file app.component.ts (you can navigate in VSCode using Ctrl+P), type there:

import { Component, OnInit } from '@angular/core';
// @ts-ignore: Unreachable code error
import Painterro from 'painterro';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pad';
  ngOnInit() {
    Painterro().show();
  }
}

To run project

ng serve

Source code of Angular Painterro Demo on GitHub