Can I include Angular compoents inside a panel of a dashboard layout

[Matthew]

My angular component currently isn't rendering in my dashboard. How do I get it to display.

I've got a minimal Angular component that is just

<div>toolbar works!</div>

I include it in the panel as

content: '<div class="content">aaa<app-toolbar ></app-toolbar>bbb</div>',

But it doesn't display.

[Indhumathy Loganathan]

Hi Matthew,

Greetings from Syncfusion support.

We understand that you want to add the angular component within the dynamically added panel. You can achieve this requirement by following the below steps. Check the code snippet.

[app.component.html]

 

<ng-template #CustomTemplate>

  <div style="height:80%; width: 100%;" class="templateContent">

    <splinechart-root style="height:80%; width: 100%;"></splinechart-root>

  </div>

</ng-template>

<!-- adding a ng container to append the template in the container -->

<ng-container #viewContainer></ng-container>

 

[app.component.ts]

 

onAdd(): void {

  this.count = this.count + 1;

  let panel: any = [

    {

      id: this.count.toString(),

      sizeX: 2,

      sizeY: 2,

      row: 0,

      col: 0,

      type: 'readyToSetTemplate',

    },

  ];

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

 

  switch (panel[0].type) {

    case 'readyToSetTemplate':

      this.splineT();

      break;

  }

}

splineT() {

  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(

    this.count.toString() + '_content'

  );

  // appending the template to the panel content element.

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

}

Sample: https://stackblitz.com/edit/angular-ucjogn-gwx7ch?file=app.component.ts,app.component.html,app%2Fapp.module.ts

Please check the sample and get back to us if you need any further assistance.

Regards,

Indhumathy L