Angular Tagged Template

angular-tagged-template.ts

/**
 * @todo when `deps` will be added to `Component` definition,
 * we could return `{deps, template}` then use it like this:
 * ```
 * @Component({
 *   selector: 'wt-root',
 *   ...ngTemplate`<${Child}></${Child}>`
 * })
 * ```
 */
export function ngTemplate(blockList, ...componentTypeList) {

  const [firstBlock, ...remainingBlockList] = blockList;

  return remainingBlockList.reduce((result, block, index) => {

    const componentType = componentTypeList[index];

    /* Grab the selector from component's metadata `ngComponentDef`. */
    const selector = componentType.ngComponentDef.selectors[0][0];

    return `${result}${selector}${block}`;

  }, firstBlock);

}

@Component({
  selector: 'wt-greetings',
  template: `<h1>Hi {{ name }}</h1>`
})
export class Greetings {
  @Input() name: string;
}

@Component({
  selector: 'wt-root',
  template: ngTemplate`
  <${Greetings} name="foo"></${Greetings}>
  <${Greetings} name="john"></${Greetings}>
  `,
})
export class AppComponent {
}