Modify html from typescript (Angular) - html

Question

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.
Actually look like that (typescript, html (from the same component)):
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 : "<div class=\"progress-fill\" style=\"background-color: black;\"><span>XX%</span></div>"
}
ngOnInit() {
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="list-group-item list-group-item-action flex-column align-items-start list-group-flush">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"> {{ graphName }}</h5>
</div>
<div class="horizontal" style="height: 100px;">
<div class="progress-track" style="display: flex; flex-wrap: nowrap; justify-content: flex-start;" id="graphInput">
<!--here comes the content-->
</div>
<button (click)="testF()">react</button>
</div>
So inputGraph must go in graphInput div. Is there a simple way to do it, would it be better to create a component for this part?

Answer 1

You can use the property binding for innerHTML like [innerHTML].
<div [innerHTML]="htmlstring">
and in your component.ts file
this.htmlstring = `<p> Hello</p>`

Answer 2

¿What kind of data came from this.graphService.refreshGraph(this.graphContent)?
¿It´s JSON data?
Maybe you could make a component named app-input-graph, with an #Input inputGraph and this html code:
<div class="progress-fill" style="background-color: black;">
<span>{{inputGraph}}</span>
</div>
And in app-graph-content:
<app-input-graph [inputGraph]="inputGraph"><app-input-graph>