With some tweaks on index.html and gulpfile.js I managed to include the pure javascript justgage into an ionic 2 app. This here just started to work (but I am not satisfied):
My Component
import {Component, Input, AfterViewInit} from '@angular/core';
import {Alert} from 'ionic-angular';
declare var JustGage: any;
@Component({
selector: 'gauge-180',
template: '<div [id]="name" class="gauge" style="width:400px; height:300px; display: inline-block; margin: 1em;"></div>'
})
export class Gauge180Component implements AfterViewInit {
@Input() name;
gauge: any;
constructor() {
}
ngAfterViewInit() {
this.gauge = new JustGage({
title: "...",
// 20 gazillion options missing
id: this.name,
// ...
});
}
}
Usage of the Component
TypeScript
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Gauge180Component } from '../../path/to/gauge-180';
@Component({
templateUrl: 'build/pages/some-page/some-page.html',
directives: [Gauge180Component]
})
export class SomePage {
constructor(private nav: NavController) {
}
}
HTML
<ion-content padding class="water-page">
<gauge-180 name="gauge-1"></gauge-180>
</ion-content>
Questions
-
I would like to write
<gauge-180 id="gauge-1"></gauge-180>instead of<gauge-180 name="gauge-1"></gauge-180>, but then we have the following effect: The DOM parser of justgage finds the outer item with the id “gauge-1” and applies all modifications to this one, not the previously targeted template of my component. I wonder how I can limit the scope of justgage such that it never sees the whole DOM or how i can circumvent the problem completey. Any hints appreciated. -
The sizes in the template are hardwired:
<div [id]="name" class="gauge" style="width:400px; height:300px; display: inline-block; margin: 1em;">, but I need them to be passed in from the surrounding ionic element. How do I obtain the currently available width and height?