Analog of ngTransclude in Angular.Dart

Question

I'm trying to figure out how to make a component render its children.

So I can compile:

<my-component>
  <div id="child"></div>
</my-component>

into something like this:

<div id="parent">
  <!-- some component stuff -->
  <div id="child"></div>
</div>

Is there something like ngTransclude in Angular.Dart?

Answer 1

AngularDart uses Shadow DOM in place of ngTransclude. This is one of the ways we are pushing Angular into the browser with emerging web standards.

Adding a <content> tag instead your component's template will cause the child element to be placed there.

e.g. in your example <my-component>'s template might look like:

<div id="parent">
  <!-- some component stuff -->
  <content></content>
</div>

For even more awesomeness, you can use Shadow DOM's content selectors as well to control which child elements are displayed.