How to render html data from JSON in a modal angular 8

I have a html table stored in a database table. I am fetching the html table using a get request, but for some reason, I cant seem to render the html from the api to the modal.

How I am fetching the html table from the api

 async loadReportData(eaCode): Promise<void> {
    this.html_content = this.service.getHtmlReport(code);
    //this.teamMembersData = await this.re.getTeamMembers(this.currentProjectId, teamId);
    console.log(this.service.getHtmlReport(code))
  }

JavaScript
​x
 
 async loadReportData(eaCode): Promise<void> {
    this.html_content = this.service.getHtmlReport(code);
    //this.teamMembersData = await this.re.getTeamMembers(this.currentProjectId, teamId);
    console.log(this.service.getHtmlReport(code))
  }
​

my angular modal where am trying to render the html table

 <ng-template #viewTeamModal let-modal>
   <div class="row">
     <div class="col-12">
       <div class="card">
         <div class="card-body">
           <div class="row">
             <div class="col-11">
               <h4 class="card-title" style="color: black;"><span class="lstick"></span>Report</h4>
             </div>
             <div class="col-1">
               <button type="button" class="close" label="Close" (click)="modal.dismiss('Cross click');">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
           </div>
           <div class="row">
             <div class="table-responsive">


             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </ng-template>

JavaScript
 
 <ng-template #viewTeamModal let-modal>
   <div class="row">
     <div class="col-12">
       <div class="card">
         <div class="card-body">
           <div class="row">
             <div class="col-11">
               <h4 class="card-title" style="color: black;"><span class="lstick"></span>Report</h4>
             </div>
             <div class="col-1">
               <button type="button" class="close" label="Close" (click)="modal.dismiss('Cross click');">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
           </div>
           <div class="row">
             <div class="table-responsive">
​
​
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </ng-template>
​

the html table being fetched from the api

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

JavaScript
 
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 
​

when I try to console log I get

Observable
operator: MapOperator {thisArg: undefined, project: ƒ}
source: Observable {_isScalar: false, source: Observable, operator: MapOperator}
_isScalar: false
__proto__: Object

JavaScript
 
Observable
operator: MapOperator {thisArg: undefined, project: ƒ}
source: Observable {_isScalar: false, source: Observable, operator: MapOperator}
_isScalar: false
__proto__: Object
​

what am I doing wrong. Thank you in advance

Answer

Nothing wrong, just that it seems like the method this.service.getHtmlReport(code) returns an Observable.

This will log the actual value:

this.service.getHtmlReport(code).subscribe(code => {
  console.log(code);
})

JavaScript
 
this.service.getHtmlReport(code).subscribe(code => {
  console.log(code);
})

Is it recommended where possible to handle the subscription using the async pipe. I put it inside OnInit but that is just for the sake of example, you can use it where you need:

public code: Observable;

ngOnInit() {
  ...
  this.code = this.service.getHtml(code);
}

JavaScript
 
public code: Observable;
​
ngOnInit() {
  ...
  this.code = this.service.getHtml(code);
}

and inside the template:

<div class="table-responsive" [innerHTML]="code | async"></div>

JavaScript
 
<div class="table-responsive" [innerHTML]="code | async"></div>

If you haven’t read about observables these resources might be useful for start:

Advertisement

Answer