In Angular 4, using [ngTemplateOutlet] I am able to refer to different html templetes() defined inside the same HTML page using its id. But how do I load an externally defined HTML page conditionally within the one component's html.Code snippet Below: main.component.html
<div *ngIf="page == 'test'">
<ng-template [ngTemplateOutlet]="test"></ng-template>
</div>
<ng-template #test>
<b>test template</b>
</ng-template>
Component code snipper: main.component.ts
if(this.router.url == "/test"){
this.page = "test";
}
Above Code works, but I'm looking for is when I have my 'test' template as an external html file(test.html), how do I refer test.html in main.component.html, as I need to refer to couple of such html pages inside main.component.html conditionally. I do not want to have them as separate components(as suggested in many Docs) as I need only html and the logic remains same for all in my main.component.ts. I just need to load different views in the same main.component
test.html
<ng-template>
<b>test template</b>
</ng-template>
Thanks in advance!