@Directive({
  selector: '[ng-outlet]',
  properties: {
    'ngOutlet': 'ngOutlet',
    'ngOutletLocals': 'ngOutletLocals'
  },
  lifecycle: [onChange]
})
class NgOutlet {
  ngOutletLocals:any;
  ngOutlet:TemplateRef; // Maybe this should take an array of templates???

  constructor(public viewContainer: ViewContainerRef) { }

  onChange() {
    // todo: Don't destroy the view if ngTemplateRef did not change
    this.viewContainer.clear();
    var viewRef:ViewRef = this.viewContainer.createEmbeddedView(this.ngOutlet);
    // use structural changes to cal setLocal only if hash `ngOutletLocals` changed.
    for(var prop in this.ngOutletLocals) {
      viewRef.setLocal(prop, this.ngOutletLocals[prop]);
    }
  }
}

@Component({
  selector: 'my-component'
})
@View({
  template: `
  <button template="var i = index" (click)="onClick()">
    {{i}}: {{text}}
  </button>

  <!-- here for simplicity, but it could be anywhere in the tree -->
  <template *ng-outlet="templates.first; locals={'index': 1}"></template>
`
})
class MyComponent {
  text: string;
  templates: QuerList<TemplateRef>;

  constructor(@ViewQuery(TemplateRef) templates: QueryList<TemplateRef>) {
    this.templates = templates;
  }

  onClick() {
    // do something
  }
}