trotyl / ng-vdom

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

Feature: pipe to covert TemplateRef to function component #84

Open trotyl opened 5 years ago

trotyl commented 5 years ago

API Design

@Component({
  template: `
    <ng-template #dateCell let-date="date">{{ date | date:'yyyyMMdd' }}</ng-template>
    <bridged-comp [renderProp]="dateCell | renderable"></bridge-comp>
  `
})
class MyComp {}

Corresponding util function:

import { asRenderable, Renderable } from 'ng-render'

@Component({
  template: `
    <ng-template #dateCell let-date="date">{{ date | date:'yyyyMMdd' }}</ng-template>
  `
})
class MyComp extends Renderable {
  @ViewChild('dateCell') dateCell: TemplateRef<{ date: Date }>

  render() {
    return (
      <SomeComp renderProp={asRenderable(this.dateCell)}>
    )
  }
}