How to pass properties to Component that has DOM modifed by jscript?

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?

I just want to add that the way i added the javascript is based on the thread Best practice to include external javascript libraries i.e. #50568 which IMHO does not really clarify the way how pure javascript libraries should be included. I consider the current solution as hack.