Posts Use of javascript libraries to angular component
Post
Cancel

Use of javascript libraries to angular component

Call functions from a plain javascript library 1-Declare the javascript to index.html example :

1
2
3
4
//use of https://github.com/MrRio/jsPDF

//index.html

2-At the x.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component } from '@angular/core';

//http://stackoverflow.com/a/40750232
declare var jsPDF: any;

export class AppComponent {
    save_pdf(){
	 var imgData = this.canvas.toDataURL('png'); //another component

        //here understands the jsPDF from the loaded JS
	 var pdf = new jsPDF('p', 'mm', [297, 210]);
	 pdf.addImage(imgData, 'JPEG', 5, 5);
	 pdf.save("test.pdf");
    }
}

Another thing to point out here, when we instantiate the class variable. We using the ngAfterViewInit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//use of http://fabricjs.com/

//The x.component.ts become :
import { Component, AfterViewInit } from '@angular/core';
declare var fabric: any;

export class AppComponent implements AfterViewInit {
    private canvas;

    //instantiate the canva!
    ngAfterViewInit() {
	    //https://embed.plnkr.co/y2WwmF2Y80cFNlatR7rb/
	    this.canvas = new fabric.Canvas('canvasELEMENT', {
		    preserveObjectStacking: true,
		    backgroundColor:"red"
	    });
    }
}

//The x.component.html
<canvas id="canvasELEMENT" width="600" height="600"></canvas>

origin - http://www.pipiscrew.com/?p=7419 use-of-javascript-libraries-to-angular-component

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags