Loading an HTML file conditionally in an Angular 5 component

Consider a scenario in my project where I have a testDynamic component.

@Component({
    templateUrl: "./test-dynamic.html", // This file needs to be overriden
    styleUrls: ['./test-dynamic.css']
})
export class testDynamic {
    constructor() { }
}

In this situation, I need to check if an override1.html file exists in the override folder. If it does, then load this file as the templateUrl; otherwise, load the default test-dynamic.html for the component. Do you have any ideas on how to achieve this?

Please refer to the following image for better understanding:

https://i.sstatic.net/cDDmJ.png

Answer №1

You are limited to including just one HTML file.

However, a workaround is to utilize *ngIf or *ngSwitchCase directives to display specific sections of the template as needed. This way, you can stick to a single HTML file for your template.

Your modified template's HTML code may look like this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The 'subscribe' property is not available on the type '() => Observable<any>'

File for providing service: import { Observable } from 'rxjs/Rx'; import { Http, Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export clas ...

Clicking our way back through the loop

Looking to display a name when each item is clicked. I've assigned an ID to each element, but it seems like I'm overlooking something. In the current code, I'm thinking there should be a variable involved, but I'm uncertain: $(document ...

Can anyone tell me if there is a specific timetable for dispatching actions in

Can someone explain what happens when I call the following: dispatch(firstStuff()); dispatch(secondStuff()); I am wondering if there is a built-in schedule in react-redux that ensures these two lines are dispatched in the correct sequence. Or is it possib ...

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

Create a customized bracelet with a specified number of colors in JavaScript

I encountered an interesting challenge recently. The task was to create a bracelet of length n using a set of specified colors, following certain conditions: No two adjacent beads should have the same color (e.g., R R). A pattern of three consecutive bea ...

What are some methods for extracting a value from a separate webpage and saving it as a variable in my code?

I am utilizing graphite to obtain statistics and would like to display a justgage gauge for a specific variable. Graphite provides values in either JSON format: [{"target": "snmp.ssbSubstation.realEnergy.1", "datapoints": [[4511552439.0, 1417540920]]}] o ...

What is the method for storing the values of a Select tag from react-select into a state?

I am currently facing an issue with setting values that I receive when selecting multiple items from a tag using "react-select". The state outcome I am looking for when selecting values from the tag should be: ['user._id', 'user._id', & ...

Having trouble locating MongoDB documents based on the _id due to issues with the ObjectId data type

I'm facing challenges when trying to retrieve MongoDB documents by their _id field in my ReactJS project. The documents in my collection have a structure similar to this (for example): _id: ObjectId("5f6651112efc19f33b34fc39") title ...

Implementing strict validation for Angular @Input by allowing only predefined values

I am facing an issue where I receive a string value as a parameter in a component, but I want to restrict the possible values that can be passed as a parameter, similar to using an enum. Currently, I have: @Input() type: string = ''; However, ...

Having difficulties obtaining sorted results for an e-commerce website API using Node.js

I have implemented logic to sort products based on query parameters sent by the user const getAllProduct = asynchandler( async ( req, res)=>{ try { // filter the products search const queryObj ={...req.query}; const excludef ...

jQuery is unable to locate the FireBreath object

Currently, I am in the process of developing a web video player by using Firebreath to compile my C/C++ codec as a browser plugin. The plugin has been successfully loaded and is functioning properly (start, stop video, etc.). My next goal is to enable full ...

Ways to achieve combined outcomes using ng-repeat

Check out this plunker. <div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'"> {{subCategory.id}} {{subCategory.name}} {{subCategory.tags}} <br/><br/> The detailed information of ...

Is there a way to upload multiple files using expressjs?

I'm looking for a way to efficiently send multiple files, including an entire directory, so that I can access them in another JavaScript file called from an HTML file. const app = require("express")(); const http = require("http"). ...

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...

I'm experiencing an issue where my express-session is being reset with every new request, leading me to question if this is related to the development environment I am using (REACT + EXPRESS)

UPDATE - I have ruled out a development environment issue as the same problem persists in production. Thank you for taking the time to look into this. I've searched through numerous questions and attempted various solutions with no success. To give ...

"Can you guide me on how to invoke a parent function from retryWhen in Angular

I'm struggling to figure out how to execute a function from retryWhen and then call the parent function once retryWhen is done. Any ideas on how I can achieve this? getStatuses(statusesType: string[]): Observable<IStatus[]> { let body ...

Error encountered in React Material UI: Appbar - TypeError occurred when attempting to read properties that are undefined (specifically, reading '100')

Currently, I am working on developing a multi-step form using Material UI components. However, upon importing the necessary components, an error is being displayed in my code snippet: import React from 'react'; import { ThemeProvider } from &a ...

I'm curious why I can only see the HTML code and not the three.js code as well

I attempted to run a sample three.js game today, but only the HTML code appeared. I've also installed three.js with npm and tried running it with the VSC Live Server, but it's not working. You can find the source code here. What should be my nex ...

What could be causing Highlight.js to fail to work following a redirect?

After developing a small application to address a specific issue, I encountered a problem while attempting to apply code highlighting using highlight.js. The issue arises when navigating from site1 to site2 or vice versa - the highlight does not take effec ...

An error occurred while parsing JSON: `Unexpected ending near "ma-sauce-launcher":"*`

After executing the command ">ng new angular-app" on Windows, I came across the following error: npm ERR! Unexpected end of JSON input while parsing near '...ma-sauce-launcher":"*' Package installation failed, please refer to the above error ...