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;
        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  
                // ...

Usage of the Component


    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import { Gauge180Component } from '../../path/to/gauge-180';
      templateUrl: 'build/pages/some-page/some-page.html',
      directives: [Gauge180Component]
    export class SomePage {
      constructor(private nav: NavController) {


    <ion-content padding class="water-page">
      <gauge-180 name="gauge-1"></gauge-180> 


  • 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.