Goal

Have the ability to declare templates in one location, but have them rendered in another.

Implementation

1. The View should be created at declaration location, with local context, injection etc. (This also implies that we should have a ChangeDetector inserted at declaration location)
2. The Destination should receive the View and set local vars on it.
3. The Destination should insert the View into the ViewContainer (Render Location)

Ionic Example

<div>
  <template toolbar-part #i="index">
    <button (click)="onClick()">{{i}}:  {{action}}</button>
  </template>
</div>

some other place:

<toolbar>
  <!-- place where the toolbar-part will be inserted -->
</toolbar>

@Component({
  selector: 'toolbar'
})
class Toolbar {
  viewContainer:ViewContainer;
  constructor(viewContainer:ViewContainer) {
    this.viewContainer = viewContainer;
  }
  addView(view:View) {
    view.setLocal('index', this.viewContainer.length);
    this.viewContainer.add(view);
  }
}

@Viewport({
  selector: 'toolbar-part'
})
class {
  constructor(viewFactory:ViewFactor, toolbar:Toolbar) {
    var view:ViewRef = viewFactory.create();
    toolbar.addView(view);
  }
}

Issues

• The template expressions need to be executed in the context of where the template is declared.
• The View created by the DOM is inserted in a different location.
• The insert location should be able to insert values into the inserted View provided that the template declares the variable.

Table Example

<virtual-table [data-source]>
  <template row-header-cell #row="rowIndex">
    {{row}} Row Header
  </template>
  <template col-header-cell #col="colIndex">
    {{col}} Column Header
  </template>
  <template cell #row="rowIndex" #col="colIndex">
    {{row}}:{{col}}
  </template>
</virtual-table>

SVG Charts Example

<bar-chart>
  <template chart-title>
  </template>
  <svg *x-axis>
    <g  ...>{{text}}</g>
  </svg>
</bar-chart>

Issues:

• context
• injecting the other ViewContainer
• getting hold of the PortoView