This snapshot contains a dashboard view with dynamic chart grids formed using a config json in Angular 2 [for grids we used angular2-grids and for charts chartjs]. As you can see these popups have a setting button placed on top encircled in pic. This is required to give the user the ability to edit the chart config as per their convenience. These grids are formed using *ngFor after fetching the grid and chart config from database and the setting button is calling a dashboard.component method as openSeetingPop(grid.config); here is the codes from my dashboard.component.html
<div *ngFor="let box of boxes; let i = index" [(ngGridItem)]="box.config" (onItemChange)="updateItem(i, $event)" (onResizeStop)="onResizeStop(i, $event)" (onDragStop)="onDragStop(i, $event)">
<div class="handle">Widget {{box.id}}
<div class="box-header-btns pull-right">
<a title="Setting" class="pointer" (click)="openSettingPopUp(box.config);">
<i class="glyphicon glyphicon-cog"></i>
</a>
<a title="Full Screen" class="pointer">
<i class="glyphicon glyphicon-fullscreen"></i>
</a>
<a title="Remove widget" (click)="removeWidget(i);" class="pointer">
<i class="glyphicon glyphicon-trash"></i>
</a>
</div>
<app-bar [chartConfig]="topFiveFastMoversConfig" *ngIf="box.chart =='<fast-movers>'"></app-bar>
<app-bar-slow-movers [slowChartConfig]="topFiveSlowMoversConfig" *ngIf="box.chart =='<slow-movers>'"></app-bar-slow-movers>
<app-cards [snapShotConfig]="inventorySnapshotsConfig" *ngIf="box.chart =='<inventory-quantification>'"></app-cards>
<app-goal-turns-per-year [turnsPerYearConfig]="turnsPerYearConfig" *ngIf="box.chart =='<goal-turns-year>'"></app-goal-turns-per-year>
<app-days-on-shelf [daysOnShelfConfig]="daysOnShelfConfig" *ngIf="box.chart =='<days-on-shelf>'"></app-days-on-shelf>
<bar-chart *ngIf="box.chart =='<most-profitable>'"></bar-chart>
</div>
</div>
dashboard.component.ts
openSettingPopUp(item):void{
console.log("chart config");
console.dir(item);
}
Now I want to bind that config json in a dynamically generated modal to give the config update form but the only thing is that the form will be dynamic depending upon the different config value for different charts.
Not able to figure out how to dynamically bind the config json to the update form and on any change in form element how to update the config json.
Dynamic chart grids in dashboard with dynamic pop up requirement dummy
Here is my suggestion. In component template, create modal div, and make it hidden.
<div id="modal-form" [hidden]="!showModal">
<div>{{currenItem.property1}}</div>
<div>{{currenItem.property2}}</div>
...
</div>
In component.ts:
showModel: boolean = false;
currentItem: any;
openSettingPopUp(item):void {
this.currentItem = item;
this.showModal = true;
$('#modal-form').dialog({modal: true});
}