@Component({
    selector: 'bol-form',
    template: `
    <table class="styledTable" id="CommoditySection"
    (handlingDeleteEvent) =
    "removeHandlingUnits(handlingUnitsCount)">
    <thead><th>Commodities</th></thead>
    <tr><td>
    <div id="commodities">

    <h5><a id="addHandlingUnits"
   (click)="addHandlingUnits(handlingUnitsCount, 0)">Add More Handling Units</a></h5>

    <dynamic-handling-component
        [componentHandlingData]="componentHandlingData"
        [removeComponent]="removeComponent">
    </dynamic-handling-component>

</div>
</td></tr>
</table>
`
})

export class App implements AfterContentInit {

    private handlingUnitsCount: number;
    private componentHandlingData = null;
    private componentCommoditiesData = null;
    private removeCommoditiesComponent = null;
    private removeComponent = null;


    constructor() {
    this.handlingUnitsCount = 0;
    }

    addHandlingUnits(unita, unitb) {

        if (unita == undefined ) {
            unita = this.handlingUnitsCount;
            unitb = 0;
        }

        this.sleep(unita * 50 + 10).then(() => {

            this.componentHandlingData = {
                component: HandlingComponent,
                inputs: {
                    handlingUnitsCount: unita,
                }
            };

            this.handlingUnitsCount += 1;
        });

   }

   removeHandlingUnits(id) {

    if (id == 0) {

         this.sleep(10).then(() => {
            this.removeComponent = {
                toDelete: id,
                allDelete: true,
            };
        });

         this.handlingUnitsCount = this.handlingUnitsCount - 1;
         this.componentHandlingData = null;
         this.componentCommoditiesData = null;

    } else {

        this.sleep(10).then(() => {
            this.removeComponent = {
                toDelete: id,
                allDelete: false,
            };
        });

         this.handlingUnitsCount = 0;
         this.componentHandlingData = null;
         this.componentCommoditiesData = null;

    }

 }

ngAfterContentInit() {

    this.addHandlingUnits(0,0);

}

sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

}