Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template> elements, but they're easy and extremely powerful once you undrestand the concepts.
What is stuctural looks like:
<h1 *structure>This is structure directive</h1> <!-- Equals to --> <template structure> <h1>This is structure directive</h1> </template>
So Structural Directive is just something shorthand for template.
import {Directive, TemplateRef, ElementRef, ViewContainerRef, Input} from '@angular/core';
@Directive({
selector: '[structure]'
})
export class StructureDirective {
@Input('structure') num;
constructor(private template: TemplateRef<any>,
private view: ViewContainerRef) {
}
ngAfterContentInit() {
let num: number = Number(this.num);
if (num > 0) {
while (num --){
this.view.createEmbeddedView(this.template);
}
}
}
}
<h1 *structure="'4'">This is structure directive</h1>
So it will print out:
