Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load conditionally templateUrl html file in Angular 5 component

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

enter image description here

like image 316
ranjit redekar Avatar asked Apr 23 '18 06:04

ranjit redekar


2 Answers

refer the following link, this is a good example of dynamic templateUrl

Angular 2/4 component with dynamic template or templateUrl

like image 118
ranjit redekar Avatar answered Oct 06 '22 00:10

ranjit redekar


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>
like image 30
Rukshan Dangalla Avatar answered Oct 06 '22 01:10

Rukshan Dangalla