The comparison operator '===' is not suitable for comparing a number and a string when applied within [ngClass]

Is there a way for a div to have a css-class based on a specific value of the variable cfgSelected, in this case '1' (as a string)?

<div [ngClass]="(cfgSelected ==='1')?'isActive':'isNormal'" 
     (click)="selectThisOne('1')">
bla ...
</div>

In the ts-file:

selectThisOne(id: any) {
    this.cfgSelected = id;
}

This code works in --dev but throws an error when trying to build --prod:

ERROR in src\app\configurator\configurator.component.html(80,50): : Operator '===' cannot be applied to types 'number' and 'string'.

Can someone help me figure out what is causing this issue?

Answer №1

Replace (cfgSelected ==='1') with (cfgSelected === 1)

Explanation

This change is necessary because the variable prod performs type checking 🌹

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

Creating a Search Bar with Ionic 3, PHP, and SQL Server for Efficient Data Retrieval

I have a project in progress that involves using Ionic 3, PHP, and a SQL Server database for the backend. One of the features I'm trying to implement is a search bar. I've looked at various examples online, but none of them have worked for me. Co ...

Creating uniform image heights using Flexbox

My webpage features a library of books, with each book displayed in rows within a flexbox container. Each book is represented as a separate block consisting of a heading (the book's name) and an image of the book cover directly below it. I'm curr ...

Adding data to an array from a JSON source using Angular 5

When I receive a response from an endpoint, it looks like this: { "data": [{ "volume": 4.889999866485596, "name": "Carton03", "weight": 5.75, "storage": 3 }, { "volume": 2.6500000953674316, "name": "Carton02", "weight": 4.5 ...

Tips for resolving issues with ngModel and formControlName in Angular

In my Angular CRUD project, everything is working fine except for the Update button. Whenever I click on the Update button, the student details window fails to open. Upon checking the web console, I am greeted with the following warning message: It seems ...

Is there a way to include a query directly as a string in Drivine and Neo4j, instead of using a separate file?

My current setup involves utilizing Drivine in conjunction with Neo4j. In the provided example, there is a demonstration of injecting a query sourced from a separate file. I am curious to learn how I can directly inline a query as a string instead? ...

Are there any alternatives to ui-ace specifically designed for Angular 2?

I am currently working on an Angular2 project and I'm looking to display my JSON data in an editor. Previously, while working with AngularJS, I was able to achieve this using ui-ace. Here is an example of how I did it: <textarea ui-ace="{ us ...

Improving the method of retrieving RTK result within getServerSideProps

Currently, I am utilizing RTK Query to make an API call within my getServerSideProps function. While I can successfully retrieve the result using the code snippet provided below, I find the process somewhat awkward. Additionally, the result lacks proper ty ...

Merge floating and absolute positioning techniques

Creating a calendar exhibiting all events in one div requires precise positioning based on the values of top and height. Let me demonstrate this concept. In the image below, both 6am events are aligned vertically. This alignment issue can be resolved by u ...

Step-by-step guide to rapidly resolve all issues in VS Code using TypeScript

After extensive searching in VS code, I have not been able to find a quick fix all solution in the documentation or plugins. Is this feature actually non-existent, or is it possible that I am overlooking a keybinding? (I am currently utilizing typescript s ...

Using ternary operator to execute a function in an Angular template

I attempted the following approach: <input *ngIf="this.checkAll ? (this.undefinedDocuments$ | async)?.length > 0 : (!this.undefinedDocuments$ | async)?.length > 0" [checked]="this.checkAll" (click)="this.checkAll ? this.handleCheckAllClick() : t ...

The ng-bootstrap ngb-accordion component in Angular2 is not visible on the screen

Even though my HTML content loads successfully (displaying "HI", "title1", and "objName11" within span tags), the ngb-accordion component is not rendering on the view. I'm struggling to identify what I might have missed. There are no compilation or b ...

Subscribe to a new Observable once the previous one completes

I need assistance in getting the current user after logging in. When I use this.router.navigate([this.returnUrl]); it does not work. Can someone please help me identify what is wrong here and how I can fix it? onSubmit(): void { this.authService.logi ...

Can you tell me the meaning of this error message: "The variable 'ParsedQs' cannot be assigned to a variable of type 'string'."

Hey there, I'm facing an issue with using the search query of mongoose. I want to make a get request using a query, but it seems that it's not possible. I'm puzzled by this error as I'm currently working with version 5.10.0 of mongoose. ...

Tips for synchronously reading a line from the console using ts-node

Currently, I am developing a node.js application using typescript which displays a menu on the console and prompts the user for input ranging from 1 to 5. To display the menu, I can utilize console.log(). console.log('1: Option#1'); console.log ...

Using Typescript for the factory design pattern

My goal is to develop a factory for generating instances of MainType. To achieve this, I want to reuse existing types (specifically the same instance) which are stored in the ItemFactory. class BaseType { } class MainType extends BaseType { } class It ...

What can be done to enforce the already set fixed height of a td cell in CSS when it is not being respected?

Upon running the example below, you may notice that the height of the cells varies slightly in each row. Ensuring uniform cell height despite different content is a requirement. Despite setting height: 1.7em;, it appears to be disregarded. How can this be ...

How can you test component methods in Angular?

As a beginner in Angular, I am currently learning how to write tests and struggling with mocking and testing methods from components. The structure of my HTML is as follows: There is a table displaying all certificates. By clicking the "edit" button, you ...

Utilizing the power of Angular 4 in combination with mailgun

I need assistance with setting up an email form on my website using Angular 4 and Mailgun as the mail service. I have a method in my mail service file to send messages, but I keep encountering a Bad Request error stating that 'from' is not presen ...

Guide on aligning input and labels side by side in Bootstrap forms using CSS only

I've exhausted all the solutions provided here, including referencing this Bootstrap horizontal-form link. However, nothing seems to be effective. I am open to trying any method at this point, even if it involves just modifying the CSS. My main object ...

What methods can be used to identify the generic type within a class structure?

Suppose I have a class like this: class Foo<T>{} How can I determine the type of the instance of the class within a method? In other words, something along the lines of: public barbaz(){ // This approach does not function if(typeof(<T>) == ...