After updating my Angular version from 8 to 9, an error has been thrown stating "It is not possible to assign the value 'undefined' to the template variable 'limit'"

Recently, I made updates to my Angular 8 project by switching it to the newest version of Angular 9. In one of the template's div elements, I declared a variable and everything seemed to be functioning correctly without any errors. To avoid initializing this variable in the .ts file (which would make it global and impact all instances where it is used within div elements), I left it as is.

However, following the upgrade to Angular 9, error messages started appearing stating 'Cannot assign value "undefined" to template variable "limit". template variables are read-only'. I would greatly appreciate any guidance or solutions on how to resolve this issue. Thank you in advance :)

                <p *ngIf="displayLimit; let limit">
                <li *ngFor="let industry of company_industries; let i = index">
                  <simple-tag type="white" class="industry-tag" *ngIf="i < limit" title="{{industry}}">
                  </simple-tag>
                </li>
                <button *ngIf="lessFlag && limit > displayLimit " class="edu_img"
                  (click)="limit = limit - displayLimit " >
                <button *ngIf="limit < info.company_industries?.length" class="edu_img"
                  (click)="limit = limit + displayLimit " (click)="lessFlag = true">
                </p>

I have sections within the code similar to the example above that also utilize the "limit" variable.

Answer №1

Angular 9 has introduced new template checks to help reduce errors during development, such as mistakenly assigning a value to a readonly variable.

To disable these checks, you can modify the properties in tsconfig.json under angularcompileroptions.

If you need more information on the available checks, you can refer to the official documentation at this link: https://angular.io/guide/template-typecheck

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

Angular 2 error: "HttpService Provider Not Found"

In my Angular 2 / Ionic 2 project, I have the following "constellation" of components and services: Component1 -> Service1 -> Service3 Component2 -> Service2 -> Service3 (where -> denotes a relationship like "using" or "calling") Whenever ...

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

This is my first time integrating TypeScript into my project. When attempting to access something using window.document.getElementById(), I keep encountering the error: Type error: Object is possibly 'null'. TS2531 I've looked online for ...

Mastering the art of styling with SASS

The introductory guide suggests: When it comes to integrating the Kendo UI theme into your project, there are numerous approaches available. One recommended method is utilizing Webpack along with its Sass loader, enabling the customization of the Kendo UI ...

I'm curious, what is the exact function of ...state?

Just dipping my toes into NgRx (redux) within Angular and I'm a bit puzzled by the use of ...state in the code snippet below. My understanding is that it functions as spread operator, but I can't grasp why the data attributes from the Interface S ...

Typescript ensures that the return type of a function is a key of an interface, which is determined based

I am attempting to enforce a specific return type from a function based on the key passed to it. For example, if the key is service1, then the correct return type should be Payloads['service1']. How can I accomplish this? interface Payloads { ...

Bidirectional data binding in Autocomplete component's matInput

Utilizing a material autocomplete input to search for an article in a database, I originally had a standard input in a table column with the ngModel directive for two-way databinding. To switch this input to an autocomplete input, I followed Angular's ...

Tips for using a TypeScript method decorator while maintaining the expected `this` scope

It was brought to my attention that the issue I encountered was due to the use of GraphQL resolvers in running my decorated method. This resulted in the scope of this being undefined. Nevertheless, the core of the question provides valuable insights for an ...

"Enhance user experience with Angular Material: Popup Windows that preserve functionality in the original window while staying vibrant and accessible

Exploring Angular Material Dialog and other Popup Window Components for a project. Making progress but facing some challenges. Here are the requirements: a) The original screen should not be grayed out, b) Users should be able to interact with the windo ...

Can the WebSocket interface be substituted with WebSocket itself?

I'm currently in the process of setting up a WebSocket.Server using ws, Express 4, NodeJS, and TypeScript by following a guide. However, I've encountered an issue with the provided code not working as expected from the tutorial found at . In ord ...

Transforming TimeZone Date Object without Altering Time

I am looking to change the time zone of a date from one timezone to another. For example: "Sun May 01 2019 00:00:00 GMT+0530 (India Standard Time)" is the current date object. I want to convert this date based on a specific timeZone offset, let's say ...

Developing client-side components with NextJS

I want to develop a single-page landing page where users can upload videos and there's a file size limit check before the upload. In my src/app/page.tsx file, I have the following code: import React from 'react'; import FileUpload from &apo ...

Issues with FormArrays containing nested FormGroups

In my reactive form, I am using a FormArray to store FormGroup elements. Despite researching and trying various approaches, I still cannot determine why it is not functioning correctly. I have combined two simplified examples based on documentation and on ...

The ListView is not updating correctly as expected

Currently, I am working on a project where I have a Page with a ListView that displays items from an ObservableArray of Expense objects. The issue I am facing is that when I scroll down, the amount property of some Expense rows is not being displayed. Howe ...

Exiting a void method in JavaScript/Typescript using the return or break statement

I find myself dealing with a complex method in Typescript that contains multiple if else if else constructs. It's a void method, and I'm wondering how I can exit the method based on a specific if condition without having to execute the remaining ...

Error: Unable to modify a property that is marked as read-only on object '#<Object>' in Redux Toolkit slice for Firebase Storage in React Native

Hey there! I've been working on setting my downloadUrl after uploading to firebase storage using Redux Toolkit, but I'm facing some challenges. While I have a workaround, I'd prefer to do it the right way. Unfortunately, I can't seem to ...

Understanding the correct way to map two arrays with boolean values is essential for effective data

My situation involves two lists: accounts and accountsWithSelectedField. I initially mapped accountsWithSelectedField like this: this.accountsWithSelectedField = this.accounts.map(s => ({...s, selected: false})); Subsequently, upon receiving a list of ...

Checkable Ionic Table

I'm curious about achieving a similar functionality to this example using Angular and Ionic, but without relying on jQuery. Here is the link for reference: Any advice on how to accomplish this would be appreciated. Thank you. ...

What could be the reason why the getParentWhileKind method in ts-morph is not returning the anticipated parent of the

Utilizing ts-morph for code analysis, I am attempting to retrieve the parent CallExpression from a specific Identifier location. Despite using .getParentWhileKind(SyntaxKind.CallExpression), the function is returning a null value. Why is this happening? I ...

Creating a custom pipe that converts seconds to hours and minutes retrieved from an API can be achieved by implementing a transformation function

Can someone please provide guidance on creating a custom pipe in Angular 8 that converts seconds to hours and minutes? Thank you. <div class="col-2" *ngFor="let movie of moviesList"> <div class="movie"> {{ movie.attributes.title }} ...

Even after calling ChangeDetectorRef.detectChanges, the ngOnChanges hook failed to trigger

export class AppComponent implements OnInit, OnChanges { @Input() value: number; constructor( private cdr: ChangeDetectorRef ) {} ngOnInit() { of(1).subscribe(v => { this.value = v; console.log(1); this.cdr. ...