.l-main-section
  p.
    As mentioned earlier, you build Angular applications as a tree of nested components.
    You've seen how to create a top-level component.
    You add child components to a parent component by using them in
    the parent component's template,
    and by specifying the child component classes in the parent's list of directives.
  p.
    Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body,
    you can create a parent
    component that uses a <code>&lt;child&gt;</code> component like so:

  code-example(language="dart" format="linenums").
    library parent_child.parent;

    import 'package:angular2/angular2.dart';
    import 'package:parent_child/child.dart';

    @Component(selector: 'parent')
    @View(template: '''
        &lt;h1&gt;{{ message }}&lt;/h1&gt;
        <span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
    ''', directives: const [<span class="pnk">ChildComponent]</span>)
    class ParentComponent {
      String message = "I'm the parent";
    }

  p You then just need to write the <code>ChildComponent</code> class to make it work:

  code-example(language="dart" format="linenums").
    library parent_child.child;

    import 'package:angular2/angular2.dart';

    @Component(selector: 'child')
    @View(template: '''
        &lt;p&gt; {{ message }} &lt;/p&gt;
    ''')
    class ChildComponent {
      String message = "I'm the child";
    }

//- [TODO: Motivate communication between components with iterator example that passes index to the child]