Navigating through Angular iterator loops

Question

Navigating through Angular iterator loops

In one of my components, I have the following method:

public *numGen(): Iterator<number> {
    for (let i = 0; i < 5; ++i)
      yield i;
  }

Additionally, my HTML contains this snippet:

<p *ngFor="let n of numGen()">{{n}}</p>

I anticipated that this would display the numbers 0 to 4 in separate paragraphs as follows:

<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

However, while it does produce the expected output, it also triggers an error message:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 
Previous value: 'ngForOf: [object Generator]'. Current value: 'ngForOf: [object Generator]'.

Does anyone have a solution to prevent this error from occurring?

angular typescript iterator yield

Answer 1

Answer №1

Optimizing change detection in Angular can be achieved by utilizing the OnPush strategy, ensuring that bindings are only checked when there is a change within the component triggered by @Input or template events. This approach not only enhances performance but also establishes a more coherent pattern for triggering change detection.

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

Explore here

If you encounter an error, it may be due to returning a new reference of the Generator object on every change detection cycle.

Alternatively, consider updating the generator instance only when necessary by leveraging the ngDoCheck hook. Although this method is invoked frequently, combining it with the OnPush strategy offers a balanced solution.

export class AppComponent  {
  generator: Iterable<number> = this.numGen();

  multiplier = 1;

  ngDoCheck(): void {
    this.generator = this.numGen();
  }

  times(): void {
    this.multiplier *= 2;
  }

  private *numGen(): Iterable<number> {
    for (let i = 0; i < 5; ++i) {     
      yield i * this.multiplier;
    }
  }
}

Example using ngDoCheck

_{Out of curiosity, what specific use case motivates your utilization of iterators/generators?}

Answer 2

Optimizing change detection in Angular can be achieved by utilizing the OnPush strategy, ensuring that bindings are only checked when there is a change within the component triggered by @Input or template events. This approach not only enhances performance but also establishes a more coherent pattern for triggering change detection.

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

Explore here

If you encounter an error, it may be due to returning a new reference of the Generator object on every change detection cycle.

Alternatively, consider updating the generator instance only when necessary by leveraging the ngDoCheck hook. Although this method is invoked frequently, combining it with the OnPush strategy offers a balanced solution.

export class AppComponent  {
  generator: Iterable<number> = this.numGen();

  multiplier = 1;

  ngDoCheck(): void {
    this.generator = this.numGen();
  }

  times(): void {
    this.multiplier *= 2;
  }

  private *numGen(): Iterable<number> {
    for (let i = 0; i < 5; ++i) {     
      yield i * this.multiplier;
    }
  }
}

Example using ngDoCheck

_{Out of curiosity, what specific use case motivates your utilization of iterators/generators?}

Navigating through Angular iterator loops

Answer №1

Similar questions

Ways to cycle through a generator?

Developing a MEAN application with simultaneous servers running Express, NodeJS, and Angular 2

"Unlocking the Secrets: Mastering Step Index Manipulation in Angular Arch

Combine several .ts files into one bundle called package.js

Forward the request from Node.js to a Spring Boot service and return a response

Next.js v13 and Firebase are encountering a CORS policy error which is blocking access to the site.webmanifest file

What is the best way to eliminate duplicate files from an Angular input file?

What is the best way to access data from a local JSON file in Gatsby when using TypeScript and GraphQL?

Angular HttpClient Catch Return Value

What is the best way to execute a function once a timeout is finished? This timeout should be initiated by a click event in Typescript

Frontend receiving data from an unexpected localhost address even with proxy settings in place

What might be causing the frequent failures in my Angular project pipeline?

Ionic Firebase Scroll Dilemma

How to successfully utilize TypeScript ES6 modules and RequireJS for registering Angular elements

The where clause in the Typeorm query builder instance is not functioning properly after its common usage

The name 'Diagnostics' cannot be located

Why does my ngFor consistently refresh while the array remains unchanged?

Looking to observe a decorated method using Jest even if the decorator poses a hurdle to method execution?

Error: Certain Prisma model mappings are not being generated

Tips for resolving the issue: Encountered an unexpected token < when parsing JSON data at position 0 using the JSON.parse function