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

Just like *ngFor in, you ' re able to pass in data into your own structural directives. This was done by declaring the variable using a let statement then passing context into the call createEmbeddedView .

We know *ngfor we do like this:

*ngfor="letmessage of messages"

So how can we also does like this?

Remember that

<*three= "Let messages"><!-- <  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 a point out after the ' three ' as an input.

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

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