angular2 dart nested components

This is a quick post to share how to do nested components in angular2 dart. It is slightly expanded version of this stackoverflow answer. We start from the quickstart tutorial as follows: The index.html is unchanged:
    <title>My App</title>
    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
In our main.dart file, we can reference components inside our templates as along as we also reference them in the directives field:
import 'package:angular2/angular2.dart';

// These imports will go away soon:
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;

@Component(selector: 'graphics-panel')
@Template(inline: '<b>I am the graphics panel</b>')
class GraphicsPanel {}

@Component(selector: 'input-panel')
@Template(inline: '<i>I am the input panel</i>')
class InputPanel {}

@Component(selector: 'arrow-logo-app')
  inline: '''
    <div><h1>Hello {{ name }}</h1> 
  directives: const [GraphicsPanel, InputPanel]
class AppComponent {
  String name = 'Bob';

main() {
  // Temporarily needed.
  reflector.reflectionCapabilities = new ReflectionCapabilities();

No comments: