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