To render the component into panels from front end

[RakhiS]

Hi,

I am using Dashboard in which I having blank panel, now I want the user to add card or chart component into one of the panels for which I have taken info like say, counts and the label for which counts need to be show i.e I am having data now how can I render the card component into it without hardcoding is their any method? Please help.

[Sowmiya Padmanaban]

Hi RakhiS,  

  

Greetings from Syncfusion support.  

  

We have validated your requirement in Syncfusion Dashboard Layout component.  We suspect that your requirement to dynamically add the component in DashboardLayout. Yes, we can dynamically inject another component into dashboard layout panel. We have prepared sample to meet your requirement, in this sample we have dynamically added the card component inside the dashboard layout panel. 

 

 Please refer the below code block.  

  

[app.component.ts]  

  

  AddPanelClick() {  

    // adding panel dynamically  

    let panel: PanelModel[] = [{  

      id: "layout_" + this.count.toString(),  

      'sizeX': 4, 'sizeY': 2, 'row': 2, 'col': 0,  

    }];  

    this.Dashboard.addPanel(panel[0]);  

    //rendes the (CustomTemplate) temaplte in dom  

    const templateValue = this.CustomTemplate.createEmbeddedView(null);  

    // inserts the template into the view container  

    this.viewContainer.insert(templateValue);  

    // Obtaining the content element of the panel  

    let panel_Content = document.getElementById("layout_" + this.count.toString() + "_content");  

    // appending the template to the panel content element.  

    panel_Content.appendChild(templateValue.rootNodes[0]);  

    this.count++;  

  }  

  

  

Please refer to the below link for the sample.  

  

https://stackblitz.com/edit/dashboard-ng-add-component-5bdiqg?file=app.component.ts 

 

Refer the below link to know more about the DashboardLayout component. 

 

UG documentation-https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started/  

 

Demo link-https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default/ 

 

API reference- https://ej2.syncfusion.com/angular/documentation/api/dashboard-layout/  

 

Please let us know, if you need any further assistance.  

  

Regards,  

Sowmiya.P 

[RakhiS]

Hi,

Thanks for the reply, but  my query is not about rendering the components directly, for that I have already followed the link which you shared and wrote method on the button "Add Panel". 

My query was, If I want to show any UI component say bar chart or card component as shown below in image:

in the very first panel, for that I am taking values from the user in form (counts and label) now how I generate the html so that the graph will be visible with the data entered by User. Please help I think you are getting my query this time.

Thanks

[Sowmiya Padmanaban]

Hi RakhiS,  

 

We have checked your requirement with DashboardLayout component. We suspect that your requirement is to change the value of the card component based on user value. In our attached sample, we have generated a dynamic value of card component when clicking the AddPanel button. Similarly, you can change the value of card component based on your requirement. 

 

Refer the below screenshot. 

 

 

Refer the sample link below. 

 

https://stackblitz.com/edit/dashboard-ng-add-component-cxs2t6?file=card.component.html 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P