1. Home
  2. Forum
  3. Angular - EJ 2
  4. Embed html in angular component

Embed html in angular component

I have a keprel generated HTML file. How can I display that in an angular component ? The html file is attached. I need to display that html page inside this div element. I'm really new to angular and I would be grateful if someone can help
<divclass="card-body">
<h5class="card-title">MyEnergyViewh5>
<buttontype="submit"class="marketValueBtn"[ngClass]="{'hidden':!timePeriod?.day}"(click)="showMarketValueBehindGraphFunc()">MarketValuebutton>
<divclass="card-content">
<app-bar-chartid="performance-graph"[chartDetails]="performanceGraph"(onTimeSlotClicked)="selectedSlotFromGraph($event)"[excluded]="excluded">app-bar-chart>
div>
div>

Attachment: test_45268c9d.rar

1 Reply 1 reply marked as answer
HB Hareesh Balasubramanian Syncfusion Team October 22, 2020 01:10 PM UTC

Hi Attiqa, 

Greetings from Syncfusion Support..! 

We have validated your shared query “I need to display that html page inside this div element” at our end. And we suspect that your requirement is to render the HTML file inside the content of the Card component and for that we have prepared a sample in which we have rendered the HTML file inside the div content .  


[app.component]: 
<div class="col-lg-12 control-section card-control-section basic_card_layout"> 
  <div class="e-sample-resize-container e-card-resize-container"> 
    <div class="row"> 
      <div class="row card-layout"> 
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
          <div tabindex="0" class="e-card" id="basic_card"> 
            <div class="e-card-header"> 
              <div class="e-card-header-caption"> 
                <div class="e-card-header-title"> 
                  Debunking Five Data Science Myths 
                </div> 
                <div class="e-card-sub-title">By John Doe | Jan 20, 2018</div> 
              </div> 
            </div> 
            <div class="e-card-content"> 
              <custom></custom> 
            </div> 
            <div class="e-card-actions"> 
              <button class="e-btn e-outline e-primary"> 
                Read More 
              </button> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 

[custom.component]: 
<!DOCTYPE html> 
<html> 

<head></head> 

<body> 
                <p>Contents rendered frrom the customized component</p> 
</body> 

</html> 

Kindly refer to the below Angular documentation, 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh 


Marked as answer
Loader.
Up arrow icon