Want an Angular 2 dynamic update form in a modal from the data passed to a function

Question

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

What is the type of 'box.config'? Can you bind it to your modal dialog? — wannadream, Apr 28 '17 at 16:13
The "box.config" type is json . I want to generate a dynamic form from the config data and put it in the dynamic modal-body and change the modal-header as well within **openSettingPopUp(item)** function. Any suggestions? @wannadream . I want a similar way like we do with jquery; form the dynamic form and put it in modal-body like **$("#myModal .modal-body").html(formdata)** — Ansuman, Apr 29 '17 at 03:56

score 0 · Answer 1 · answered Apr 29 '17 at 05:29

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});
}

Want an Angular 2 dynamic update form in a modal from the data passed to a function

1 Answers1