CODEWITHSUNDEEP
dartangular-dart
robert
robert

Reputation: 11

Is it possible to create a component for a single table row?

Is it possible to create an Angular Dart component that could be used as a table row (or as tbody)? I'd like to do something like this:

<table>
  <my-component ng-repeat="value in ctrl.values" param="value"></my-component>
</table>

Instead of quite ugly:

<table>
  <tr ng-repeat="value in ctrl.values"> ...(here some td's)...</tr>
</table>

If not, is there any way to achieve something similar?

Thanks,

Robert

Upvotes: 1

Views: 521

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657929

Is this what you are looking for?

library main;

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

class Item {
  String name;
  Item(this.name);
}

@NgComponent(
    selector: 'tr[is=my-tr]',
    publishAs: 'ctrl',
    visibility: NgDirective.CHILDREN_VISIBILITY,
    applyAuthorStyles: true,
    template: '''<content></content><span>{{ctrl.value.name}}</span><span> - </td><td>{{ctrl.value}}</span>'''
)
class MyTrComponent extends NgShadowRootAware{
  @NgTwoWay('param') Item value;

  MyTrComponent() {
    print('MyTrComponent');
  }

  @override
  void onShadowRoot(ShadowRoot shadowRoot) {
    var elements = new List<Element>.from(shadowRoot.children.where((e) => !(e is StyleElement) && !(e is ContentElement)));
    ContentElement ce = shadowRoot.querySelector('content');
    elements.forEach((e) {
      e.remove();
      var td = new TableCellElement();
      td.append(e);
      print('append: ${e.tagName}');
      ce.append(td);
    });
  }
}

@NgController(
  selector: "[ng-controller=row-ctrl]",
  publishAs: "ctrl",
  visibility: NgDirective.CHILDREN_VISIBILITY
)
class RowController {
  List<Item> values = [new Item('1'), new Item('2'), new Item('3'), new Item('4')];
  RowController() {
    print('RowController');
  }
}

class MyAppModule extends Module {
  MyAppModule() {
    type(MyTrComponent);
    type(RowController);
  }
}

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

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular playground</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <h1>Angular playground</h1>

    <p>Custom TableRow</p>

    <table ng-controller="row-ctrl"  >
      <tr is="my-tr" ng-repeat="value in ctrl.values" param="value"></tr>
    </table>

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

Using another tag name like <my-component> isn't possible because the <table> won't accept such tags as content, so I adapted how polymer defines extended DOM elements with the selector 'tr[is=my-tr]'. In Angular other selectors are fine as long as the tag name is tr.

You can find the project's source code at in this GitHub repo - angular_playground

Screenshot of the result

Screenshot of the result

Upvotes: 2

Related Questions