TemplateRefAsRenderProps.ts

// We can share code using a regular component with a TemplateRef!
@Component({
  selector: 'mouse',
  template: `
  <div style="height: 100%" (mousemove)="handleMouseMove($event)">
    <ng-container *ngTemplateOutlet="template; context: state" ></ng-container>
  </div>
  `,
})
export class Mouse {
  @ContentChild(TemplateRef) template;
  state = { x: 0, y: 0 }

  handleMouseMove(event) {
    this.state = {
      x: event.clientX,
      y: event.clientY
    }
  }
}


@Component({
  selector: 'my-app',
  template: `
  <div style="height: 100%">
    <mouse>
      <ng-template let-x="x" let-y="y">
        // The template gives us the state we need
        // to render whatever we want here.
        <h1>The mouse position is ({{x}}, {{y}})</h1>
      </ng-template>
    </mouse>
  </div>
  `,
})
export class AppComponent {}