Issue with triggering angular function multiple times in certain conditions

Question

Issue with triggering angular function multiple times in certain conditions

Issue: Experiencing difficulties with Angular directive as it is being called multiple times, resulting in incorrect transaction outcomes and multiple entries on the Console screen.

Desired Outcome: Ensure that the function executes only once.

Sample code snippet

within HTML page

<div *ngIf="TEST(0)"> </div>

within .ts Page

TEST(number) {
  console.log (number);
}

Outcome:

https://i.sstatic.net/WX11K.png

2 2 2 2

I have provided a simple example on the StackBlitz website.

Here is the link; StackBlitz Link

Could this be an angular bug? Or is there something I am missing?

Appreciate your insights in advance.

angular typescript

Answer 1

Answer №1

The reason for this recurring event is due to the invocation of a function/method (TEST) within one of the data-binding syntaxes (*ngIf).

Each time Angular conducts Change Detection, the function will be triggered.

Change Detection handles variables straightforwardly, but functions operate differently. The only way to determine if a function's value has changed is by executing it, hence the repetitive calls.

If you're interested in exploring similar topics, I've provided answers on StackOverflow before, like this one that delves into various scenarios affecting performance.

You may also find value in watching a presentation by Tanner Edwards from NgConf 2018.

I hope this sheds some light on the situation. :)

Answer 2

The reason for this recurring event is due to the invocation of a function/method (TEST) within one of the data-binding syntaxes (*ngIf).

Each time Angular conducts Change Detection, the function will be triggered.

Change Detection handles variables straightforwardly, but functions operate differently. The only way to determine if a function's value has changed is by executing it, hence the repetitive calls.

If you're interested in exploring similar topics, I've provided answers on StackOverflow before, like this one that delves into various scenarios affecting performance.

You may also find value in watching a presentation by Tanner Edwards from NgConf 2018.

I hope this sheds some light on the situation. :)

Answer 3

Answer №2

Because your function is contained within an *ngIf statement, it will be triggered during every change detection cycle.

I typically adhere to the following approach:

First, access a variable from your component.ts file.

<div *ngIf="testVariable"> </div>

Secondly, only invoke this method when you need to update / modify the variable.

public testVariable: number;

public setTest(number) {
  console.log (number);
  this.testVariable = number;
}

Answer 4

Because your function is contained within an *ngIf statement, it will be triggered during every change detection cycle.

I typically adhere to the following approach:

First, access a variable from your component.ts file.

<div *ngIf="testVariable"> </div>

Secondly, only invoke this method when you need to update / modify the variable.

public testVariable: number;

public setTest(number) {
  console.log (number);
  this.testVariable = number;
}

Issue with triggering angular function multiple times in certain conditions

Answer №1

Answer №2

Similar questions

Looking to display a single Angular component with varying data? I have a component in Angular that dynamically renders content based on the specific URL path

Expanding and collapsing table rows in Angular 5 sequentially

Strategies for updating JSON file content as data evolves

The issue with Angular's mat-icon not displaying SVGs masked is currently being investigated

Binding textarea data in Angular is a powerful feature that allows

What is the process for upgrading ag-Grid to newer versions?

The autocomplete feature is not functioning properly when attempting to prefill form inputs with values from another component

The error message "Property 'list' is not found on type 'void' React - Material UI" indicates that the 'list' property is not recognized

Adding an icon to the contents of a specific column in Angular material

Error message "NoSuchKey" encountered on CloudFront when accessing an Angular application

What is the process for implementing a unique Angular theme across all components?

Is it possible to use TypeScript or Angular to disable or remove arrow key navigation from a PrimeNG Table programmatically?

Having difficulty transferring navigation props between screens using react-navigation

Encountering an Error in Angular with Jest: TypeError Unable to Access Property 'ngModule' from null

Adding a ng-select field when a button is clicked

Bring JSON into Angular 7 application

Generic Typescript Placeholder Design

How can we restrict a user from moving away from the current tab in Angular?

Node path response not being properly configured

Exploring the keyof operator in Typescript for object types