How to load conditionally templateUrl html file in Angular 5 component

Question

There is one scenario in my project, Consider, I have one testDynamic component

@Component({
    templateUrl: "./test-dynamic.html", // Need to override this file
    styleUrls: ['./test-dynamic.css']
})
export class testDynamic {
    constructor() { }
}

here need to check if an override1.html file is exists in override folder then load this file as templateUrl otherwise load the component default test-dynamic.html. Any idea how to achieve this.?

refer the following image for clearly understanding

You will check the below: <br> stackoverflow.com/questions/31692416/… — GSK
– GSK, Commented Apr 23, 2018 at 6:48
@GSK Thanks, I read you shared link and tried on localhost but almost all solutions are not working with Angular 5. — ranjit redekar
– ranjit redekar, Commented Apr 23, 2018 at 10:04

Rukshan Dangalla · Accepted Answer · 2018-04-23 06:46:56Z

2

You can't add more than one HTML file.

What you can do is, use *ngIf or *ngSwitchCase to show only parts of the template if that is your intention. Then you have only one template html file.

Then html of your template will be something like this:

<div *ngIf="YOUR_CONDITION">View 01</div>
<div *ngIf="YOUR_CONDITION">View 02</div>

answered Apr 23, 2018 at 6:46

Rukshan Dangalla

2,6002 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ranjit redekar Over a year ago

Thanks for your answer, but it does not work for me because we are building a framework on Angular and this is one scenario to provide template overriding facility to users. One question is it possible before AOT?

Collectives™ on Stack Overflow

How to load conditionally templateUrl html file in Angular 5 component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related