Angular 2: The linting error shows up as "Anticipated operands need to be of the same type or any"

Question

Angular 2: The linting error shows up as "Anticipated operands need to be of the same type or any"

So, I have this shared service file where a variable is defined like so:

export class SharedService {
    activeModal: String;
}

Then, in my component file, I import the service and define it as follows:

constructor(public sharedService: SharedService) {
}

Within that component's template file, I am checking the value of the modal:

<div *ngIf="sharedService.activeModal === 'login'"></div>

Everything seems to be working fine, however, there is an issue in the editor. The expression `sharedService.activeModal === 'login'` has a red squiggly line underneath it, with a linting error message displayed when hovered over:

[Angular] Expected the operands to be of similar type or any
property sharedService of ModalComponent

Any suggestions on what might be going wrong here?

angular typescript eslint

Answer 1

Answer №1

Consider using lowercase string instead of the wrapper object type String when declaring the variable activeModal.

Answer 2

Consider using lowercase string instead of the wrapper object type String when declaring the variable activeModal.

Answer 3

Answer №2

If you are experiencing a similar error and the suggested solution does not work for you, double check to ensure that you are not mistakenly comparing enums with strings. If this is the case, consider creating a member in your class and assigning the enum to it, like so:

class LalaComponent {
  someEnum = SomeEnum;
  randomValue: SomeEnum;
}

Then, in your HTML code, implement the following:

<ng-container *ngIf="randomValue === someEnum.option1" >
</ng-container>

Answer 4

If you are experiencing a similar error and the suggested solution does not work for you, double check to ensure that you are not mistakenly comparing enums with strings. If this is the case, consider creating a member in your class and assigning the enum to it, like so:

class LalaComponent {
  someEnum = SomeEnum;
  randomValue: SomeEnum;
}

Then, in your HTML code, implement the following:

<ng-container *ngIf="randomValue === someEnum.option1" >
</ng-container>

Answer 5

Answer №3

If you wish to include additional type, you have the option to prevent any potential errors in the future

selectedWindow: any

Answer 6

If you wish to include additional type, you have the option to prevent any potential errors in the future

selectedWindow: any

Angular 2: The linting error shows up as "Anticipated operands need to be of the same type or any"

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing constants within if statements in JavaScript/TypeScript

Display Material UI icons as markers within Highcharts

Testing the Click() function in Angular2 using keypress event

I am experiencing issues with the Link component in Next.js version 13.4, as it

What specific event do I require for the onChange event in React using TypeScript?

WebStorm is not implementing the exclude option as specified in the tsconfig.json file

Improprove the types generated from GraphQL responses

"Enable email delivery in the background on a mobile app without relying on a server

When using VS Code, custom.d.ts will only be recognized if the file is currently open in the

Experiencing CORS problem in Ionic 3 when accessing API on device

Angular app - static List mysteriously clears out upon refresh

Typescript error encountered when executing multiple API calls in a loop causing Internal Server Error

Removing Bootstrap Styles in Angular Single Page Applications

Beware of the 'grid zero width' alert that may appear when utilizing ag-Grid's sizeColumnsToFit() function on multiple ag-Grids that are shown within a tab menu

Tips for utilizing the patchValue method within a dynamic FormArray in Angular

How can I make sure that another function will only be executed after the completion of a function in

Warning: Potential spacing issues when dynamically adjusting Material UI Grid using Typescript

A guide on incorporating Angular Material into a monolithic application in JHipster version 7.6.0

Ways to invoke a slice reducer from a library rather than a React component

Unable to access specific data from the JSON string retrieved from the backend, as it is returning a value of undefined