[Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2

Just like passing in an array to *ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It‘s crucial to understand how the *directive syntax expands into a <template> and adds a custom @Input based on the syntax you use so that you can use your own data.

The syntax looks like:

<h2 *three="let message from messages">{{message.to}} - {{message.message}}</h2>

For template it would looks like:

<template [threeFrom]="messages"></template>

It combimes ‘three‘ and ‘from‘ keywords.

So the directive would looks like:

import {Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
@Directive({
  selector: ‘[three]‘
})
export class ThreeDirective {
  @Input() set threeFrom({one, two, three}) {this.view.createEmbeddedView(this.template, {
      $implicit: {
        to: "People" + Math.random(),
        message: two
      }
    });

    this.view.createEmbeddedView(this.template, {
      $implicit: {
        to: "People" + Math.random(),
        message: three
      }
    });

    this.view.createEmbeddedView(this.template, {
      $implicit: {
        to: "People" + Math.random(),
        message: one
      }
    });
  }

  constructor(private template: TemplateRef<any>, private view: ViewContainerRef) {

  }
}