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:

{
    {message.to}} - {
    {message.message}}

 

For template it would looks like:

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
      
       , private view: ViewContainerRef) {  }}