I have an existing AngularJS application which uses a directive to 'wrap' the DyGraphs JavaScript library and that works well.
However, I'm investigating migration to Angular2 and am struggling to create an Angular2 component (or directive) to wrap DyGraphs and have been unable to find any targeted help.
I've looked at similar charting libraries and how these have been wrapped and attempted to do the same with DyGraphs but hit a number of hurdles.
I'd be grateful for any advice on how to proceed with this task as it's likely that we'll need to wrap a number of other JS libraries including several from Vis in the near future.
Many thanks in advance.
Update
Further to Thierry's great answer, I've refactored the code as shown below:
index.html:
<html>
<head>
<title>My Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- dygraph -->
<script src="node_modules/dygraphs/dygraph-combined.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
app/app.component.ts
import { Component } from '@angular/core';
import { DygraphComponent } from './dygraph.component';
@Component({
template: `
<dygraph [title]="title"></dygraph>
`,
directives: [ DygraphComponent ]
})
export class AppComponent {
title:string = 'some title';
}
app/dygraph.component.ts:
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
declare var Dygraph:any;
@Component({
selector: 'dygraph',
template: `
<div #graph></div>
`
})
export class DygraphComponent implements AfterViewInit {
@ViewChild('graph')
elt:ElementRef;
@Input()
title:string;
ngAfterViewInit() {
new Dygraph(this.elt.nativeElement, "data.txt", {});
}
}
However, when I try to run the code, I get a 404 error on traceur. Any suggestions on how to resolve this very gratefully received.