[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) {

}
}