Google Chart is shown NgDirective, but not NgComponent

StackOverflow https://stackoverflow.com/questions/23079390

Question

I'm having issues with showing Google Graphs in an AngularDart component, but not in an AngularDart directive. For the code below the graph is nicely displayed for the directive, where the div node has had two divs added as children to contain the graph and SVG. But for the compoenent, the graph is not shown, but in the DOM the same divs appear as children. Any ideas of how to debug this or solutions for it?

Running the code below prints out to console both Succesfully printed plot for Component graph and Succesfully printed plot for Directive graph.

The simplest code to showcase it is:

main.dart:

import 'dart:html' as dom;

import 'package:js/js.dart' as js;
import 'package:angular/angular.dart';

void printPlot(dom.Element element, String title) {
  var gviz = js.context.google.visualization;

  var gTableData = new js.Proxy(gviz.DataTable);
  gTableData.addColumn('number', 'Size');
  gTableData.addColumn('number', 'Counts');

  gTableData.addRow(js.array([1, 2]));
  gTableData.addRow(js.array([3, 4]));

  var options = js.map({
      'title': title
  });

  // Create and draw the visualization.
  var chart = new js.Proxy(gviz.ScatterChart, element);
  chart.draw(gTableData, options);
  print("Succesfully printed plot for $title");
}

@NgComponent(selector: '[my-component]')
class MyComponent {
  final dom.Element element;
  MyComponent(this.element) {
    js.context.google.load('visualization', '1', js.map({
        'packages': ['corechart'],
        'callback': (() => printPlot(element, 'Component graph'))
    }));
  }
}

@NgDirective(selector: '[my-directive]')
class MyDirective {
  final dom.Element element;
  MyDirective(this.element) {
    js.context.google.load('visualization', '1', js.map({
        'packages': ['corechart'],
        'callback': (() => printPlot(element, 'Directive graph'))
    }));
  }
}

@NgController(selector: '[controller]',
  publishAs: 'ctrl')
class Controller {
  Controller() {
  }
}

class DashboardModule extends Module {
  DashboardModule() {
    type(Controller);
    type(MyComponent);
    type(MyDirective);
  }
}

void main() {
  ngBootstrap(module: new DashboardModule());
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body controller>
<div my-component></div>
<div my-directive></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Was it helpful?

Solution

This is very probably due to the shadowDOM introduced by the NgComponent. When the JavaScript library doesn't support shadowDOM (which it probably doesn't) it just won't find your DOM elements and therefore can't act on them. The AngularDart team is working on someone similar to NgComponent but without shadowDOM (which is currently not possible). But this is in experimental state only (as far as I know) and no release date available.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top