Angular 4 - how to use [ngTemplateOutlet] to load multiple html pages conditionally within the same component

时间:2018-03-07 13:26:09

标签: html angular typescript angular4-forms

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!

0 个答案:

没有答案