Multiple triggers occur when custom component properties are bound

Question

Multiple triggers occur when custom component properties are bound

Upon using a custom component with an input property where a function is bound to it, I have observed that the function gets called multiple times.

For example:

<some-tag [random-input]="randomFunction()"></some-tag>

And in the class:

private randomFunction() {
    console.log('Called!');
    return true
}

Running a simple code snippet like this results in several 'Called!' logs appearing in the console. In my project, the randomFunction makes a call to the database, which can be quite bothersome.

Is there anyone who knows why this behavior occurs?

javascript angular typescript ionic-framework

Answer 1

Answer №1

Angular constantly checks for updated values in every cycle, leading to multiple messages in the log.

To avoid this issue, it is not recommended to have TypeScript functions as inputs in a component.

One solution is to make a call to the server/database in the constructor, OnInit, or OnChanges lifecycle hooks, store the result in a local variable, and then use that variable as an input for the component. An example of this approach can be seen below:

export class MyComp {
   dbResult: any;

   constructor(http: HttpClient) {
     http.get('/my/api/call').subscribe(result => {
       this.dbResult = result;
     });
   }
   ....
}

..and in HTML:

<some-tag [random-input]="dbResult"></some-tag>

It's worth noting that marking the function as private may cause issues during production build.

Answer 2

Angular constantly checks for updated values in every cycle, leading to multiple messages in the log.

To avoid this issue, it is not recommended to have TypeScript functions as inputs in a component.

One solution is to make a call to the server/database in the constructor, OnInit, or OnChanges lifecycle hooks, store the result in a local variable, and then use that variable as an input for the component. An example of this approach can be seen below:

export class MyComp {
   dbResult: any;

   constructor(http: HttpClient) {
     http.get('/my/api/call').subscribe(result => {
       this.dbResult = result;
     });
   }
   ....
}

..and in HTML:

<some-tag [random-input]="dbResult"></some-tag>

It's worth noting that marking the function as private may cause issues during production build.

Answer 3

Answer №2

For Angular to successfully update the value within the component, it must first verify if any changes have occurred.

Answer 4

For Angular to successfully update the value within the component, it must first verify if any changes have occurred.

Multiple triggers occur when custom component properties are bound

Answer №1

Answer №2

Similar questions

Data input tag fails to upload

Using React in ES5 to create a button that triggers two separate functions with a

When the page is refreshed, the route fails to load the data

The model does not align with the body request, yet it is somehow still operational

What is the best way to utilize the "useRouter" function to extract parameters from the URL within the getServerSideProps() method in Next.js?

What is the best way to compare a JSON object and a string in JavaScript?

Storing data or a page in a list within a React Native application

Jquery assigns the value of the last output to a variable

Incorporate Thymeleaf's HTML using the powerful JavaScript framework, jQuery

The Jquery code encountered an issue where it was unable to access the property 'length' of an undefined

bootstrap thumbnail displayed without a border

Ajax operates by fetching data from a database without requiring large files to be retrieved

Angular command not recognized by the system

insert <asp:linkbutton> dynamically

The page is not responding after closing the modal dialog

Clicking on an element will remove a class and unselect an input using JQuery

A guide on using JavaScript to obtain the original calculation for a specific equation once a checkbox has been unchecked

Determine the number of lines present in a textarea

AJAX success object encounters an uncaught type error

Struggling with a non-functional jQuery navigation tab onclick feature