GridStack overlapping issue

Question

I'm having an issue with .addWidget() when autoposition is set to true. basically when adding a new widget, it is always is positioned at 0 (x), 0 (y), 4 (width), 4 (height) so overlapping the first widget.

before adding new widget

after adding the new widget...

here is the gridstack init using angular2.

initGrid() {
        setTimeout(() => {
            $(this.el.nativeElement).find('.grid-stack').gridstack({
                animate: true
            });

            this.grid = $(this.el.nativeElement).find('.grid-stack').data('gridstack');

            // this.renderStart();

            $(this.el.nativeElement).find('.grid-stack').on('dragstop', (event, ui) => {
                if (!this.widgets[event.target.id].data.position) {
                    this.widgets[event.target.id].data.position = {};
                }


                setTimeout(() => {
                    this.widgets[event.target.id].data.position['x'] =   $(event.target).attr('data-gs-x');
                    this.widgets[event.target.id].data.position['y'] = $(event.target).attr('data-gs-y');
                    this.widgets[event.target.id].data.position['width'] = $(event.target).attr('data-gs-width');
                    this.widgets[event.target.id].data.position['height'] = $(event.target).attr('data-gs-height');

                    this.updateWidget(event.target.id);
                }, 10);


            });

            if (this.editMode) {
                this.grid.enable();
            } else {
                this.grid.disable();
            }
        });
    }
    
    
    
    addMiniWidget() {

        let data = {};

        for (let i = 0; i < this.typeData.length; i++) {

            if (this.typeData[i].name === this.selectedType) {

                data['type'] = this.selectedType;

                for (let key in this.typeData[i].data) {
                    if (this.typeData[i].data.hasOwnProperty(key)) {
                        data[key] = this.typeData[i].data[key];
                    }
                }

            }
        }

        this._miniWidget.store(new WidgetModel(null, data))
            .subscribe((res) => {
                this.widgets.push(res);
                this.attachWidgetToPage(res.id); // db input
                this.cancelAddingWidget(); // resets 
                // this.destroyGrid(); // this is a fix that reinits the grid
            });
    }

<div class="grid-stack">
        <div *ngFor="let widget of widgets; let $i = index"
             class="grid-stack-item"
             [attr.data-gs-x]="((widget.data.position && widget.data.position.x) ? widget.data.position.x : 0)"
             [attr.data-gs-y]="((widget.data.position && widget.data.position.y) ? widget.data.position.y : 0)"
             [attr.data-gs-width]="((widget.data.position && widget.data.position.width) ? widget.data.position.width : 4)"
             [attr.data-gs-height]="((widget.data.position && widget.data.position.height) ? widget.data.position.height : 4)"
             id="{{$i}}">


            <mini-widget-contact-details class="grid-stack-item-content"
                                         *ngIf="widget.data.type === 'contactDetails'"
                                         [index]="$i"
                                         [data]="widget.data"
                                         (show)="showAddForm($event)"
                                         (remove)="removeWidget($event)"
                                         [editMode]="editMode"></mini-widget-contact-details>


            <app-menu-items-list class="grid-stack-item-content"
                                 *ngIf="widget.data.type === 'menuItemList'"
                                 [index]="$i"
                                 [data]="widget.data"
                                 (show)="showAddForm($event)"
                                 (remove)="removeWidget($event)"
                                 (save)="updateWidget($event)"
                                 [editMode]="editMode"></app-menu-items-list>

            <div *ngIf="currentEdit === $i">
                <mini-form [(model)]="selectedType"
                           [types]="types"
                           (show)="showAddForm()"
                           (save)="addMiniWidget()"
                           [addFormShow]="addFormShow"
                           (cancel)="cancelAddingWidget()"></mini-form>
            </div>

        </div>
    </div>

Will be very grateful for any light shone upon this issue :)