Skip to main content

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
export class AppComponent {
  la = [1, 2, 3];


<div *bla="la">
  some content

will be transformed into

<ng-template [bla]="la">
    	some content
  • 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';

  selector: '[bla]'
export class BlaDirective {

  @Input() set bla(value) {
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

Structural directives need TemplateRef and ViewContainer.

TODO display the content of the template