I have running Angular 12 application and I want to achieve a scenario where I want to display different html templates without creating components inside parent component using ngTemplateOutlet. All the different templates is a separate html files

parent.component.html

<ng-container [ngTemplateOutlet]="templatePath"> 

<ng-template #test1></ng-template> // displays the content of test1.html
<ng-template #test2></ng-template> //  displays the content of test2.html

templatePath is basically path of the html template which will come as an input property.

parent.component.ts

templatePath = './test1.html'; // not sure how to fetch the html template, so added this

test1.html

<h1>Hello</h1>

This is just a html template file. I don't want to use component for this

test2.html

<h1>Welcome</h1>

This is just a html template file. I don't want to use component for this

I am not sure whether ngTemplateOutlet is the right way to achieve the above scenario. Please suggest what can be used in Angular to achieve this scenario.