Why angular remove attribute of my HTML element content?

Question

I am a newbie of Angular Framework.

I need to prepare a web page to show a list of Calltree

This is CallTree object.

export class CallTree {
callTreeId:number;
division:string;
systemName:string;
location:string;
serviceLevel:number;
missionCritical:string;
timeToStartProcedure:string;
contact:string;
timeToEscalate:string;
logRecipients:string;
status;
version:number;
}

The callTree.contact attribute MAY contains the following content:

  <p><span style="color:#FF0000;">bla bi bi bla...</span></p>

It is my call-tree.service.ts:

import { CallTree } from './CallTree';
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Observable,OperatorFunction } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class CallTreeService {

  constructor(private http: HttpClient){ 

  }
  getActiveCallTreeList():Observable<CallTree[]>
  {  
    var callTreeIdList:string[];
    var callTreeList: CallTree[]=[];
    return this.http.get("http://myServer/getCallTreeList.php").pipe(
        map((res) => {
          callTreeIdList=Object.keys(res);
          for (var i=0;i<callTreeIdList.length;i++)
              {
            var callTree=res[callTreeIdList[i]];

            callTree.location=callTree.location.replace(/\n/g,"<br>");
            console.log(callTree.contact);
            callTree.contact=callTree.contact.replace(/\n/g,"<br>");

            callTree.logRecipients=callTree.logRecipients.replace(/\n/g,"<br>");
            callTreeList.push(callTree);
          }
          return callTreeList;
      }), catchError(this.handleError));
  }
  handleError(handleError: any): OperatorFunction<CallTree[], any> {
    console.log(handleError)
    throw new Error("Error! something went wrong.");
  }

}

This is part of my app.component.html:

<table id="callTreeTable" class="display">
                <thead>
                    <tr class="heading">
                        <th>Division</th>
                        <th>System</th>
                        <th>Location</th>
                        <th>Service<br>Level<a href="#serviceLevel">*</a></th>
                        <th>Time Interval to start established<br>procedures<a href="#timeLimit">#</a></th>
                        <th>Call-Tree</th>
                        <th>Time Interval to <br>escalate<br>if no reply</th>
                        <th>Appreciation<br>Log Recipients</th>
                        <th>Operation Manual(s)</th>
                    </tr>
      </thead>
      <tbody id="callTreeList">
          <tr *ngFor="let callTree of callTreeList" class="normal">
              <td>{{ callTree.division }}</td>
              <td>{{ callTree.systemName }}</td>
              <td class="center" style="white-space: pre-wrap;">{{ callTree.location }}</td>
              <td class="center">{{ callTree.serviceLevel }}</td>
              <td class="center">{{ callTree.timeToStartProcedure }}</td>
              <td  [innerHTML]="callTree.contact"></td>
              <td class="center">{{ callTree.timeToEscalate }}</td>
              <td [innerHTML]="callTree.logRecipients"></td>
              <td>
                  <span>

                  </span> 
              </td>
            </tr>
      </tbody>
  </table>  

I can see the content of callTree.contact following in browser console.

<p><span style="color:#FF0000;">bla bi bi bla...</span></p>

That means in call-tree.service.ts the content of "contact" attribute is ok.

However, the page does not the text in red.

I found that the HTML element content changed to :

<p><span>bla bi bi bla...</span></p>

So, why angular remove the style of the element?

Answer 1

Because innerHtml which you are using performs html sanitization in security reasons and removes the style.

implement pipe as follows

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform {
  constructor(private sanitizer:DomSanitizer){}

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

and use innerHtml with that

<td  [innerHTML]="callTree.contact | safeHtml"></td>