trotyl / ng-vdom

(Developer Preview) A virtual-DOM extension for Angular, also work as React bridge.
260 stars 12 forks source link

Feature: TemplateRef rendering support #83

Open trotyl opened 5 years ago

trotyl commented 5 years ago

API Design

@Component({
  template: `
    <ng-template #myTemplate let-name>
      <p>Hello {{name}}!</p>
    </ng-template>
  `
})
class MyComp extends Renderable {
  @Input() name: string
  @ViewChild('myTemplate') myTemplate: TemplateRef<{ name: string }>

  render() {
    const MyTemplate = this.myTemplate

    return (
      <MyTemplate name={this.name} />
    )
  }
}

With helper directive:

import { RenderDef } from 'ng-render'

@Component({
  template: `
    <p *rnDef>Hello {{name}}!</p>
  `
})
class MyComp extends Renderable {
  @Input() name: string
  @ViewChild(RenderDef) rnDef: RenderDef<{ name: string }>

  render() {
    const MyTemplate = this.rnDef.template

    return (
      <MyTemplate name={this.name} />
    )
  }
}