Structural Directives - The Asterisk (*) Prefix

The (*) is a syntactic sugar. You'll have a ng-template wrapped arround the host element with the *directive. 
 This snippet 
 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styles: []
})
export class AppComponent {
 la = [1, 2, 3];
}
 
 app.component.html 
 <div *bla="la">
 some content
</div>
 
 will be transformed into 
 <ng-template [bla]="la">
	<div>
 	some content
 </div>
</ng-template>
 
 The bla directive moved to ng-template element where it is now a property binding
 meaning the BlaDirective should have an @Input() bla which will get the value of la . 
 
 The div element who hosted the *directive moved inside the ng-template . 
 and you need the directive like this 
 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
 selector: '[bla]'
})
export class BlaDirective {

 @Input() set bla(value) {
 console.log(value);
 }
 
 constructor(
 private templateRef: TemplateRef<any>,
 private viewContainer: ViewContainerRef) { }
}
 
 Structural directives need TemplateRef and ViewContainer. 
 TODO display the content of the template