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