[Angular Directive] Implement Structural Directive Data Binding with Context in Angular

Just like in

*ngFor

, you're able to pass in data into your own structural directives. This is done by declaring the variable using a

let

statement then passing context into the

createEmbeddedView

call.

We know *ngFor we did like this:

*ngFor="let message of messages"

So how can we also do like this?

Remember that

<h1 *three="let messages">

<!-- Equal to -->

<template let-messages></template>

import {Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
@Directive({
selector: '[three]'
})
export class ThreeDirective {
@Input() set three(value) {
let num = 3;

while (num--) {
const message = {
to: "People" + Math.random(),
message: "Hello" + Math.random()
};
this.view.createEmbeddedView(this.template, {
$implicit: message
})
}
}

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

}
}

There to avoid change detection problem (value changed after compoennt inited). We need to point out after 'three' as an input.

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