Having trouble changing the title with Switch/Case in Angular?

I am facing an issue where the title is not displayed as expected based on the environment value in appConfig.json.

appConfig.json

"env": "stage",

app.component.ts

env: string;

constructor(
    private configService: ConfigService
) {}

ngOnInit() {
    this.environment = this.configService.config.env;
};

app.component.html

<ng-template [ngSwitch]="env">
    <span *ngSwitchCase="'production'">Title Production</span>
    <span *ngSwitchCase="'stage'">Title Stage</span>
    <span *ngSwitchDefault>Title Default</span>
</ng-template>

Answer №1

Consider using ng-container(or div) in place of ng-template as the hosting element for the ngSwitch directive.

<ng-container [ngSwitch]="env">
    <span *ngSwitchCase="'production'">Title Production</span>
    <span *ngSwitchCase="'stage'">Title Stage</span>
    <span *ngSwitchDefault>Title Default</span>
</ng-container>

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

Working with decimal numbers in jQuery and JavaScript: a basic guide

Following a button click, I have implemented a function that updates the displayed number: var initial_price = parseFloat($("#current_price").text()); var added_price = initial_price + 1.01; $("span#current_price").text(added_price); This is the ...

Calculate the number of characters in the input and increase a variable by one every x characters

Currently, I am incorporating AngularJS into a new project and faced with the task of counting the length of a textarea. Adding up the total number of "pages" in the messaging app every 160 characters while decreasing if text is removed. Obtaining the len ...

combine blank cells in table generated with vuejs

I am attempting to display a table of students where each column represents a subject, and underneath each column are the names of the students who failed in that particular subject. The challenge I am facing is that my data is structured in rows instead o ...

How can I access DOM elements in Angular using a function similar to the `link` function?

One way to utilize the link attribute on Angular 2 directives is by setting callbacks that can transform the DOM. A practical example of this is crafting directives for D3.js graphs, showcased in this pen: https://i.sstatic.net/8Zdta.png The link attrib ...

How can I maintain the selected state of checkbox and radio button in ReactJS after page refresh?

I am facing an issue with my multistep form that contains radio buttons and checkboxes from material UI. Although the data is stored correctly in state and local storage, when I move to the next page and then return, the selections appear unselected to the ...

Encountering an issue with React and Google charts: Unable to read property 'push' of undefined

I encountered a strange issue with React and my Google Charts. Initially, when I log in to the page displaying my chart, everything appears as expected. However, when I import new data to update the values on the chart, it suddenly disappears, and I am pre ...

The feature to toggle push notifications is missing in Xcode 11, and is also not available in the capability settings

I'm currently developing an Ionic project and trying to incorporate FCM Push notifications. I am unable to locate the toggle push notifications option in the signing & Capabilities tab in Xcode. ...

What is the best way to dynamically add fields to every object in an array of Firestore documents using RxJS?

Trying to solve a challenging RxJS issue here. In my Angular service class, I initially had a method that fetched data from the Firebase Firestore database like this: async getAllEmployees() { return <Observable<User[]>> this.firestore.co ...

The module is missing a declaration file and therefore has an implicit type of 'any'. This error (TS7016) occurs in TypeScript version 2.0

So I've been experimenting with the module react-image-gallery. Surprisingly, there seems to be no types available for this package when trying to install it using npm. When attempting npm install @types/react-image-gallery, all I get is a 404 error. ...

Smartlook fails to correctly store user consent

I am currently working on integrating Smartlook into our website. Since we are using React, I am unable to follow the suggested steps in the documentation which can be found here. Our implementation involves initializing Smartlook using a script tag in th ...

Learn how to calculate and showcase time discrepancies in minutes using Angular2

I am currently working on an Angular app that displays orders using the *ngFor directive. Each order has a datetime field indicating the date it was created. My goal is to implement a timer that shows how long a customer has been waiting for their order ...

Using multiple jQuery dialogs on index.php

I have a vision for my website to mirror the Windows environment, complete with icons that prompt dialog boxes when clicked. On my site's index page, I've added the following code within the head tags: <link rel="stylesheet" href="http://cod ...

Use the knockout textInput plugin in combination with the maskedinput plugin

Is there a simple way to use data-bind="textInput: aProperty" and apply an input mask or automatic formatting while the user is typing? Although using the masked input plugin somewhat works, it results in losing the real-time updates that Knockout's ...

Tips for storing a single document in two separate collections within the same MongoDB database

I am currently exploring nestjs and I am faced with a challenge. My goal is to retrieve a document from collection_1 and then store the same document into collection_2. I have tried using the $out aggregation, but found that I am only able to save one docu ...

Dynamic Data Visualization: Implementing smooth transitions to update a plot when the dataset's x-axis scale is modified

I encountered some issues while working with a Histogram chart using d3, as demonstrated in this example. After plugging in my data, I noticed strange side effects such as retained information from previous datasets on the x-axis scale even after refreshin ...

Prod build of an Ionic 5 and Angular 9 application fails to load, although it functions correctly when using Ionic serve. Surprisingly, no errors are displayed

After migrating my app from ionic 4 to 5 and Angular 7 to 9, I implemented all necessary changes in configuration and code to ensure a smooth transition. The Ionic serve command works perfectly and there are no errors when creating a production build. Howe ...

AJAX function in Chrome console is throwing an error message stating "Unexpected Token }"

Dealing with this issue has been quite unusual for me. I've spent the last 3 days trying to troubleshoot it, but now it's no longer bothering me. The situation involves a button and a textbox that sends the data from the textbox to a PHP page whe ...

Address the NPM alert regarding Bootstrap's 'unmet peer dependency' in Angular even if Bootstrap is not utilized

In my web project, I am using Angular 5.2.0 along with Bootstrap 4. To install Bootstrap 4, I used the command npm i bootstrap --save, which resulted in unmet peer dependencies warnings: npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email_ ...

When working with Node.JS, is it necessary to include 'event' if you include 'net' using the require statement?

As I examine the code, I notice that there is no instance of "require('event')" present. However, there is this piece of code: server.on('error', function (e) { if (e.code == 'EADDRINUSE') { console.log('Address in ...

Executing VueJS keyup handler after the previous onclick handler has been executed

Link to example code demonstrating the issue https://codepen.io/user123/pen/example-demo I am currently facing an issue with a text field named search_val that has a watcher attached to it. The text field includes a v-on keyup attribute to detect when th ...