How to add Painterro into Angular app

#StandWithUkraine
Today, 18th May 2022, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

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