javascript - How to load conditionally templateUrl html file in Angular 5 component - Stack Overflow

admin管理员组

文章数量:1023251

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

@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 ponent default test-dynamic.html. Any idea how to achieve this.?

refer the following image for clearly understanding

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

@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 ponent default test-dynamic.html. Any idea how to achieve this.?

refer the following image for clearly understanding

• javascript
• angular
• typescript
• webpack
• angular5

Share Improve this question Follow asked Apr 23, 2018 at 6:35 ranjit redekarranjit redekar 94711 gold badge1212 silver badges2525 bronze badges 3

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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>

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

@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 ponent default test-dynamic.html. Any idea how to achieve this.?

refer the following image for clearly understanding

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

@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 ponent default test-dynamic.html. Any idea how to achieve this.?

refer the following image for clearly understanding

• javascript
• angular
• typescript
• webpack
• angular5

Share Improve this question Follow asked Apr 23, 2018 at 6:35 ranjit redekarranjit redekar 94711 gold badge1212 silver badges2525 bronze badges 3

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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>

本文标签： javascriptHow to load conditionally templateUrl html file in Angular 5 componentStack Overflow