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
$ npm -v

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": {
  "devDependencies": {

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';
  styleUrls: ['./app.component.css']
export class AppComponent implements OnInit {
  title = 'pad';
  ngOnInit() {

To run project

ng serve

Image for a hint

Source code of Angular Painterro Demo on GitHub

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

Best related