Include iframe in content not work

[Sébastien GUISSE]

Hello,

I've tried to include an <iframe> in panel content but it is not visible

public dashboardObject: DashboardLayoutComponent;

  public panels: any = panelData;

  public count: number = 5;

  public panelsData: PanelModel[] = [

    {

      sizeX: 2,

      sizeY: 2,

      row: 0,

      col: 0,

      header: "<div>Panel 1</div>",

      content:

        '<div>iframe not visible

<iframe id="viewerFrame" frameborder="0" tabindex="1" style="width: 100%; height: 100%;display:block;" src="https://fr.giveawayoftheday.com/"></iframe>

</div>'

    },

See https://stackblitz.com/edit/angular-7tksbh?file=app.component.ts

Thanks,

Sébastien

[Sharon Sanchez Selvaraj]

Hi Sébastien  , 

Thanks for contacting Syncfusion support. 

We have checked with your requirement. We suggest you to use the content Template in Dashboard Layout so that your required Iframe content will be made visible. 

Refer to the following code 

 <ejs-dashboardlayout id="api_dashboard" #api_dashboard columns="6" [allowResizing]="true" [panels]='panelsData' 

      [cellSpacing]='cellSpacing'> 

      <div *ngFor="let title of panels"> 

      </div> 

      <e-panels> 

        <ng-container *ngFor="let panel of values"> 

          <e-panel [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [row]="panel.row" [col]="panel.col" 

            [header]="panel.header" [content]="panel.content"> 

            <ng-template #content> 

              <div><iframe id="viewerFrame" frameborder="0" tabindex="1" 

                  style="width: 100%; height: 100%;display:block;" 

                  src="https://fr.giveawayoftheday.com/"></iframe></div> 

            </ng-template> 

          </e-panel> 

        </ng-container> 

      </e-panels> 

    </ejs-dashboardlayout> 

We have modified the sample here for your reference. 

https://stackblitz.com/edit/angular-7tksbh-yz7zyt?file=app.component.html 

Please check with the below links for more details on DashboardLayout component.  

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

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

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

Please get back to us if you need any further assistance. 

Regards, 

Sharon Sanchez S.