#StandWithUkraine
Today, 20th March 2023, 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.
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
