Angular 2 Structural directives

Structural directives are used for changes the DOM layout by adding and removing DOM elements. Here we will learn about Angular 2 Structural directives. Here, first of all, we will see what is Structural directive and how to use it and then we will learn to create our own custom Structural directive.
Learn Angular 2 step by step
Angular 2 Structural directives
import {Directive, TemplateRef, ViewContainerRef, Input} from '@angular/core';
@Directive({
    selector:'[rangeRepeater]'
})
export class RangeRepeaterDirective{
    constructor(private templateRef: TemplateRef<any>,
                private viewContainerRef: ViewContainerRef){

    }

    @Input()
    set rangeRepeater(value){        
        this.viewContainerRef.clear();
        for(var i:number=value[0]; i<= value[1]; i++){
            this.viewContainerRef.createEmbeddedView(this.templateRef,{
                $implicit: i
            })
        }
    }
}
Posted By :