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.
Try this and use your own myVar variable:
<ng-container *ngIf=“myVar === 1; then test1 else test2”></ng-container>
<ng-template #test1></ng-template> // displays the content of test1.html
<ng-template #test2></ng-template> // displays the content of test2.html