How to add Painterro into Angular app

Painterro + Angular

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

Image for a hint

Source code of Angular Painterro Demo on GitHub

#painterro #angular
0
Ivan Borshchov profile picture
Aug 30, 2021
by Ivan Borshchov
Did it help you?
Yes !
No

Best related