angular 5 with gridster having different components

i am using angular 5 with latest material and trying to get gridster working from https://github.com/tiberiuzuld/angular-gridster2

My html looks like:

 <gridster [options]="options">
                        <gridster-item [item]="item" *ngFor="let item of dashboard">
                              <app-infolet-smart-alerts [ngClass]="(smartAlertState == false) ? 'dashboard-widget-1-2' : 'dashboard-widget-2-2'" 
                                                            (onClickedExpand)="smartAlertSize($event)">
                              </app-infolet-smart-alerts>

                        </gridster-item>
                  </gridster>

the relevant .ts

ngOnInit() {

     this.options = {
       itemChangeCallback: DynamicHomeComponent.itemChange,
       itemResizeCallback: DynamicHomeComponent.itemResize,
       draggable: {
         enabled: true
       }
     };

     this.dashboard = [
       {cols: 1, rows: 1, y: 1, x: 1},
       {cols: 1, rows: 1, y: 1, x: 1}
     ];
  }

options: GridsterConfig;
dashboard: Array<GridsterItem>;

Questions 1. what is y and x here? assuming cols and rows are number of col out of 12 the individual item is gonna take.

2. i have like different components as it's a dashboard. let's say defined as <app-comp1></app-comp1> and <app-comp2></app-comp2> So, how is my grid going to render 1st comp in 1st item and 2nd comp in 2nd item of the grid? it's not list of images that i can pass as array based on some index.

From a quick glance at the code in the gridster github repo, I believe that cols and rows is for the objects size/representation. The y and x are the axis's of which the object will be placed in the grid.

<gridster [options]="options">
  <gridster-item [item]="{cols: 2, rows: 1, y: 0, x: 0}">
    <app-comp1></app-comp1>
  </gridster-item>
  <gridster-item [item]="{cols: 2, rows: 1, y: 3, x: 4}">
     <app-comp2></app-comp2>
  </gridster-item>                  
</gridster>