title: Setting to SafeHTML - Angular 2
body: <p>I have a <code>div</code> which <code>id</code> is "carID".</p>
  
  <p>I need to do something like this:</p>
  
  <pre><code>magic(){
    //Safe Html is imported previously in the component
    document.getElementById('carID'): SafeHtml
  }
  </code></pre>
  
  <p>So basically what I need is to change the type of my div to <code>SafeHtml</code></p>
  
  <p><strong>Pipe</strong></p>
  
  <p>I have a Pipe:</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  import * as jQuery from 'jquery';
  import { escape } from 'querystring';
  import { TestExecutionComponent } from './test-execution/test-execution.component';
  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  //import * as angular from '../angular.js';
  //CAMBIAR a string
  @Pipe({
    name: 'formatXml'
  })
  export class FormatXmlPipe implements PipeTransform  {
    constructor(private sanitized: DomSanitizer) {}
  
    testExecutionComponent: TestExecutionComponent;
  
    transform(xml: String): SafeHtml {
      var formatted = '';
      var reg = /(&gt;)(&lt;)(\/*)/g;
      xml = xml.replace(reg, '$1\r\n$2$3');
      var pad = 0;
      jQuery.each(xml.split('\r\n'), function (index, node) {
        var indent = 0;
        if (node.match(/.+&lt;\/\w[^&gt;]*&gt;$/)) {
          indent = 0;
        } else if (node.match(/^&lt;\/\w/)) {
          if (pad != 0) {
            pad -= 1;
          }
        } else if (node.match(/^&lt;\w[^&gt;]*[^\/]&gt;.*$/)) {
          indent = 1;
        } else {
          indent = 0;
        }
  
        var padding = '';
        for (var i = 0; i &lt; pad; i++) {
          padding += '  ';
        }
  
        formatted += padding + node + '\r\n';
        pad += indent;
      });
  
      var escaped = formatted.replace(/&amp;/g, '&amp;amp;').replace(/&lt;/g, '&lt;').replace(/&gt;/g, '&amp;gt;').replace(/ /g, '&amp;nbsp;').replace(/\n/g, '&lt;br /&gt;');
      // https://stackoverflow.com/questions/39240236/insert-xml-into-dom-in-angular-2
      let safeEscaped = this.sanitized.bypassSecurityTrustHtml(escaped);
  
      return safeEscaped;
      //let safeEscaped = this.sanitized.bypassSecurityTrustHtml(escaped);
  
  //return safeEscaped;
    }
  }
  </code></pre>
  
  <p>where I use <code>bypassSecurityTrustHtml</code> with the string.</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>  &lt;div id="carDiv" class="table-responsive"&gt;
                  &lt;table class="table table-bordred table-striped "&gt;
                    &lt;tbody *ngIf="cars"&gt;
                      &lt;tr *ngFor="let car of cars; let i = index;"&gt;
                        &lt;td *ngIf="i==_rowToShow" [innerHTML]="car.ID| formatXml"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/tbody&gt;
                  &lt;/table&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>My code is working. I call from the HTML file to my Pipe, and I get the answer. The problem is that when I print it on the <code>div</code>, the string keeps being the same (no format).</p>
  
  <p>I have read that I need to:</p>
  
  <ul>
  <li>First: Use <code>bypassSecurityTrustHtml</code> on the string</li>
  <li>Second: Print it on a <code>SafeHtml</code> </li>
  </ul>
  
  <p>The post that I am checking is the following: <a href="https://stackoverflow.com/questions/39240236/insert-xml-into-dom-in-angular-2">Here</a></p>
  
  <p>I have made the 1st step, so I guess that right now what I need is to use <code>SafeHtml</code> for the <code>Div</code>.How can I do it?</p>