title: Modify html from typescript (Angular)
body: <p>I try to modify a part of HTML in a component as we do with JS "innerHTML" in a angular app. I'm a beginner with angular, maybe I missed something important.</p>
  
  <p>Actually look like that (typescript, html (from the same component)):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, Input } from '@angular/core';
  import { GraphService } from '../services/graph.service';
  
  @Component({
    selector: 'app-graph-content',
    templateUrl: './graph-content.component.html',
    styleUrls: ['./graph-content.component.scss']
  })
  export class GraphContentComponent implements OnInit {
    
    @Input() graphName: string;
    @Input() index: number;
    @Input() id: number;
    @Input() graphContent: any;
    graphI:string;
  
  
    constructor(private graphService:GraphService) { }
    testF(){
      var inputGraph = this.graphService.refreshGraph(this.graphContent);
  
      //inputGraph should go in DOM and look like : "&lt;div class=\"progress-fill\" style=\"background-color: black;\"&gt;&lt;span&gt;XX%&lt;/span&gt;&lt;/div&gt;"
    }
    
    ngOnInit() {
  
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="list-group-item list-group-item-action flex-column align-items-start list-group-flush"&gt;
     &lt;div class="d-flex w-100 justify-content-between"&gt;
       &lt;h5 class="mb-1"&gt; {{ graphName }}&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div class="horizontal" style="height: 100px;"&gt;
      &lt;div class="progress-track" style="display: flex; flex-wrap: nowrap; justify-content: flex-start;" id="graphInput"&gt;
        &lt;!--here comes the content--&gt;
      &lt;/div&gt;
      &lt;button (click)="testF()"&gt;react&lt;/button&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So <code>inputGraph</code> must go in <code>graphInput</code> div. Is there a simple way to do it, would it be better to create a component for this part?</p>