Using *ngfor in e-panel component is not rendering when array is updated.

[Sagar]

When I add items in scorecards array, new e-panel is not being rendered.
<e-panel *ngFor="let scorecard of scorecards" [col]="scorecard.col" [row]="scorecard.row" [sizeX]="scorecard.sizeX" [sizeY]="scorecard.sizeY" [id] = "scorecard.id.toString()">
  <ng-template #content >
      <div>
        <app-scorecard (closed)="closedTab(scorecard.id)" [id]="scorecard.id">app-scorecard>
       div>
  ng-template>e-panel>
I verified that it is rendered issue by wrapping ejs-dashboardlayout in a div and using *ngIf to hard refresh the component, it worked that way. 
Is this a bug, or am I missing something? Thanks in advance.

[Keerthana Rajendran]

Hi Sagar, 

We have checked your reported query that dashboard layout panels is not updated dynamically. We suggest you to update the panels using service. For your reference we have prepared a sample. In that sample, we have dynamically updated the panel using service and again re-render the dashboard layout component. 

 Refer to the sample link below. 

https://stackblitz.com/edit/angular-1zsxrm-d2k4ed?file=file.service.ts 

Please let us know if you have any concerns. 

 

Regards, 

Keerthana.   

[Sagar]

Thank you for your reply and sample application. Please find my concerns below.

I see you are rendering the whole dashboard layout component whenever a new item is pushed to the scoreboard1. This is exactly what I am trying to avoid (performance reasons). I was able to achieve similar using *ngIf.

What my question is => Why the angular change detection does not kick off for dashboard layout component when a new item is pushed to scoreboard1? If I wrap my app-scorecard inside a div and use *ngFor on that div, then my component is rendered whenever I push an item on the array. The change detection kicks off.

Is there any alternative to this, so that I do not need to re-render the whole dashboard layout component each time I add a new item to the array?

[Keerthana Rajendran]

Hi Sagar,  

 

Good day to you. 

We have checked your reported query that dynamically update the panels without re-render the whole component. In dashboard layout, we have provided the addPanel() method. In that method, you have to set the panel properties (sizeX, sizeY, Row and Col, etc.).  

Whenever you want to update the scoreboard value, bind the changeDetection for that property(scorecard), in that call back function use the addPanel() method with newly updated value in a scorecard to render the new panel element without re-render the whole dashboard component. 

Refer the below sample link for dynamically update the panel content. 

https://stackblitz.com/edit/angular-kad3vz-syzytl?file=app.component.html 

Refer the below link for addPanel() method in dashboard layout. 

Sample link : https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/properties 

Documentation link: https://ej2.syncfusion.com/angular/documentation/dashboard-layout/panels/add-remove-panels/?no-cache=1 

Please let us know, if you  require further assistance on this.  

Regards, 

Keerthana. 

 

[Sagar]

Thanks for the solution. It works.

The solution, however, looks like a work around rather than the optimal solution. 

Is the current behavior of dashboard layout component not rendering new component on pushing item to array intended? 

Is there any feature on pipeline to support dynamic component rendering using the method like addPanel()?

Anyway thank you very much for your assistance and a great library.

[Keerthana Rajendran]

Hi Sagar,  

  

Query 1 – Is the current behavior of dashboard layout component not rendering new component on pushing item to array intended?  

On further analysis about your requirement, change detection is not detected during a push (add a new item to an array) and pop operations. It detects only when the changes happened in existing array values. So, we suggest you to use the addPanel() method to dynamically add a panel. Refer to the sample in our previous update. 

  

Query 2 – Is there any feature on pipeline to support dynamic component rendering using the method like addPanel()? 

In the Dashboard layout, the content of the dashboard layout panels changed based on requirements (may be text, images or custom controls). So, it is difficult to handle this in our component side. We have not provided any method for dynamically generated content in our dashboard layout. We suggest you to manually update the content in the dashboard layout based on your requirement. 

  

Regards, 

Keerthana.