Using a Bootjack Component in Angular Dart Component

Question

I am trying to use Angular Dart and Bootjack for my project. I have a small test program in which I've written a component that uses the dropdown from Bootjack, however the onclick does not seem to be working. If I put the same html code in the main.html it works correctly, it just does not work from inside the component's html. Here is the code I am currently using.

mytest.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>MyTest</title>
    <link rel="stylesheet" href="packages/bootjack/css/bootstrap.min.css">
    <link rel="stylesheet" href="packages/bootjack/css/bootstrap-theme.min.css">
  </head>
  <body>    

    <testing></testing>

    <script src="packages/shadow_dom/shadow_dom.min.js"></script>
    <script type="application/dart" src="mytest.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

mytest.dart

library myTest;

import 'dart:html';
import 'package:bootjack/bootjack.dart';

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import '../lib/test/test_component.dart';

void main() {
  applicationFactory()
      .addModule(new MyAppModule())
      .run();
}

class MyAppModule extends Module {
  MyAppModule() {
    type(TestingComponent);
  }
}

test_component.html

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

test_component.dart

library testing;

import 'package:angular/angular.dart';
import 'package:bootjack/bootjack.dart';

@Component(
    visibility: Directive.CHILDREN_VISIBILITY,
    selector: 'testing',
    templateUrl: '../lib/test/test_component.html',
    publishAs: 'cmp',
    applyAuthorStyles: true)

class TestingComponent {
  TestingComponent() {
      Dropdown.use();
    }
}

Currently I have Dropdown.use() in the TestingComponent class, but it does not work if I have in it main() either. Does anyone have any ideas about what I am doing wrong?

You shouldn't use ` <script src="packages/shadow_dom/shadow_dom.min.js"></script>` because it's deprecated and causes a lot of troubles when you build to JS. Use the 'web_components` package instead. — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-05-27T17:43:31

As far as I know doesn't BootJack support shadowDOM. When you set the attribute 'useShadowDom' : false of your Angular component it might work.

Using a Bootjack Component in Angular Dart Component

1 Answers