() => <p style-background-color={foo} style-font-size-px={bar}>

function directive(type: Type<any>): (value: any, extras?: object) => never

import { NgClass } from '@angular/common'
import { NgModel } from '@angular/forms'
import { directive, Renderable } from 'ng-renderable'

const ngClass = directive(NgClass)
const ngModel = directive(NgModel)

@Component()
class MyComponent extends Renderable {
  @Input() active: boolean
  value: string

  render() {
    const classNames = { highlight: this.active }

    return (
      <p ngClass={ ngClass(classNames) }>
        <input ngModel={ ngModel(this.value, { ngModelOptions: { /* ... */ } }) } onNgModelChange={ (value) => this.value = value } />
      </p>
    )
  }
}

import { Renderable } from 'ng-renderable'

@Component({
  selector: 'my-comp'
})
class MyComponent extends Renderable {
  constructor(injector: Injector) {
    super(injector, { sibling: true })
  }

  render() {
    return <p>42</p>
  }
}

@Component({
  template: `
    <render-outlet [type]="myType" [props]="{ className: 'foo' }">
      Foo
    </render-outlet>
  `
})
class MyComp {
  myType = 'div'
}

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

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)}>
    )
  }
}

import { Migration } from 'ng-renderable'
import { Calendar } from 'some-lib'

@Directive({
  selector: 'my-calendar',
})
class CalendarComponent extends Migration<Calendar> {
  @Input() set date(value: Date) { this.update({ value }) }
  @Output() dateChange = this.observe(props => props.onChange)

  constructor(injector: Injector) {
    super(injector, Calendar)
  }
}

() => <p class-foo={x > 0} />

import { Renderable } from 'ng-render'

@Component()
class MyComponent extends Renderable {
  render() { /* ... */ }
}

@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} />
    )
  }
}

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} />
    )
  }
}

import { createElement, render } from 'ng-renderable'
import 'ng-renderable/browser'

render(<p>Hello World!</p>, document.querySelector('#main'))

() => <p attr-foo={bar} />

() => <p data-foo={bar} aria-hidden />

function pipe(type: Type<any>): (value: any, ...extras: any[]) => never

import { AsyncPipe, DatePipe } from '@angular/common'
import { pipe, Renderable } from 'ng-renderable'

const async = pipe(AsyncPipe)
const date = pipe(DatePipe)

@Component()
class MyComponent extends Renderable {
  @Input() title: Observable<string>
  @Input() date: Date

  render() {
    return (
      <p title={ async(this.title) }>
        { date(this.date, 'fullDate') }
      </p>
    )
  }
}