title: Angular 5 add dynamic html file into DIV
body: <p>I am very new to Angular, I am trying to insert the html file as my string and insert into DIV element</p>
  
  <p>I have my <code>search.component.html</code> called</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div #ID&gt;&lt;/div&gt;
  </code></pre>
  
  <p>components.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component} from '@angular/core';
  
  @Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.scss']
  })
  export class SearchComponent {
    constructor() {}
  
    let ServerResponseHtml = '&lt;div&gt;&lt;input type="text"/&gt;&lt;input type="text"/&gt;&lt;span class="btn btn-outline-primary btn-sm" (click)="open(content)"&gt;View Document&lt;/span&gt;&lt;/div&gt;';
  
    document.getElementById("DIV").innerHTML = ServerResponseHtml;
  }
  </code></pre>
  
  <p>I am getting the response from server as complete html markup, Just I need to append into my DOM and display the content, the markup can have inline styles also.</p>
  
  <p>I tried for <code>&lt;div [innerHTML]="ServerResponseHtml"&gt;&lt;/div&gt; and &lt;div innerHTML="{{ServerResponseHtml}}"&gt;&lt;/div&gt;</code> but this is not displaying as html it is displayed as text.</p>