CODEWITHSUNDEEP
javascripthtmlangulartypescript
Kass224
Kass224

Reputation: 89

HTML reads the TypeScript tags as a string

I have been looking for an answer to this question but people always ask the opposite (HTML --> JS).

Doing some research, I understood that Angular makes it difficult to read the tags as actual tags when read on HTML for security purpose. In my case, I must do it but my <br> tag is read as text. Currently, my html code looks like this :

<table mat-table [dataSource]="scannerList" class="mat-elevation-z8 tabElement">
    <ng-container matColumnDef="scanners">
        <th mat-header-cell *matHeaderCellDef>Scanners</th>
        <td mat-cell *matCellDef="let element">
            <span class="floatLeft">{{element.innerHTML}}</span>
            <button mat-icon-button title="Delete" (click)="editCali(element)" class="btn">
                <mat-icon color="primary">edit</mat-icon>
            </button>
            <button mat-icon-button title="Delete" (click)="deleteCali(element)" class="btn">
                <mat-icon color="primary">delete</mat-icon>
            </button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns;"
    ></tr>
</table>

You don't need most of the stuff in the code, the main focus is on how <span class="floatLeft">{{element.innerHTML}}</span> is not working as I want it to work.

element is an HTMLElement so when I use element.innerHTML, the output is :

Product Name <br>5000$ <br>Product Description

But what I want is :

Product Name
5000$
Product Description

Upvotes: 1

Views: 908

Answers (1)

thisdotutkarsh
thisdotutkarsh

Reputation: 980

Interpolated content is always escaped, that is, the HTML isn't interpreted and the browser displays angle brackets in the element's text content.

For the HTML to be interpreted, bind it to an HTML property such as innerHTML. Like below,

<span class="floatLeft" [innerHTML] = "element"></span>

But binding a value that an attacker might control into innerHTML normally causes an XSS vulnerability.

Read more about Sanitization in Angular here.

Upvotes: 2

Related Questions