Why is this div empty when created in the typescript file?

Question

Typescript

tab1: {
    headings: ['Col 1', 'Col 2', 'Col 3', 'Col 4'],
    content: [
        {
            col1: 'name of row object',
            col2: `<div style="width: 550px; height: 40px; border: 1px solid black"></div>`,
            col3: 'col3'
        }
    ]
},

HTML (I have removed css classes for ease of reading)

<table>
    <thead>
        <tr>
            <th *ngFor="let heading of visibleData.headings">
                <span>{{heading}}</span>
            </th>
        </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let row of visibleData.content" >
        <tr>
            <td *ngFor="let column of row"><div [innerHtml]="column"></div></td>
            <td><div style="width: 550px; height: 40px; border: 1px solid red"></div></td>
        </tr>
    </ng-container>
    </tbody>
</table>

This is a screenshot of the DOM. It shows the passed in version being empty while the hard coded version has the html needed.

Here is a screenshot output table. As it is in the dom, the html that is passed in does not display correctly but the html that was written directly to the 2nd td displays correctly.

Thanks for your help!

You need a sanitizer like shown in http://stackoverflow.com/questions/34585453/how-to-bind-raw-html-in-angular2/34585513#34585513 or http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 — Günter Zöchbauer, Feb 24 '17 at 14:44

Chris Sharp · Accepted Answer · 2017-02-24T16:30:51.317

Using Günter Zöchbauer's suggestion to use a sanatizer I researched and implemented DomSanatizer from @angular/platform-browser

    import {DomSanitizer} from '@angular/platform-browser';

    export class ResourcesComponent {
      constructor(private sanitizer: DomSanitizer){}

      tab1: {
          headings: ['Col 1', 'Col 2', 'Col 3'],
          content: [
              {
                  col1: 'name of row object',
                  col2: this.transform(`<div style="width: 550px; height: 40px; border: 1px solid black"></div>`),
                  col3: 'col3'
              }
          ]
      },

      transform(html) {
          return this.sanitizer.bypassSecurityTrustHtml(html);
      }
    }

In the same class I added a transform function to sanitize the html.

Finally, I passed in my html and it worked as expected. No changes were needed in the html

I tried this on a large peice of html, which is being returned in a function, and it worked perfectly. Thanks for the initial suggestion Günter Zöchbauer!

Why is this div empty when created in the typescript file?

1 Answers1