0

I'm new to angular gridster2. I would like to know an important code for "how to load a gridster dynamically and statically when a button is clicked". For example, I have a button named 'select layout' in my UI page and when I select "4×1" option, the grids should load dynamically according to the option selected. Please help me with this. how can we do this using angular 2?

Gitnik
  • 564
  • 7
  • 26
Yaser Arafath
  • 1
  • 1
  • You need to use dynamic components (see component factory). You must also keep in mind that angular-grdister2 gridster needs to have parent's height set before the grid is instantiated. Your button will have the method to call the component factory, and then component with the grid will be instantiated in the designated place. – Gitnik Jan 31 '19 at 10:46

1 Answers1

2

You can use ndc-dynamic package, this is my way to implement

HTML

<gridster id="dashboard" #dashboard [options]="options" (drop)="onDrop($event)" class="transparent">
   <gridster-item #gridsterItem[item]="item" *ngFor="let item of dashboardArray">
    <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item.component" [ndcDynamicInputs]="item.input"
                    ></ndc-dynamic>
            </gridster-item>
</gridster>

TS

onDrop event

this.dashboardArray.push({
                    rows: 4,
                    cols: 4,
                    x: 0,
                    y: 0,
                    componentType: DashboardComponentType.Grid,
                    input: {
                        chartId: '',
                        dashboardId: this.dashboardId,
                    },
                    component: GridChartComponent,
                    name: "GridChart"
})
Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62