Repeated calls to Angular's <img [src]="getImg()"> frequently occur

Question

Repeated calls to Angular's <img [src]="getImg()"> frequently occur

Can someone help me figure out what's going on here? Recently, I set up a new Angular project and in app.component.html, I have the following code:

<img [src]="getDemoImg()">

In app.component.ts:

getDemoImg(){
  console.log('why so many logs???');
  return 'https://historia.nationalgeographic.com.es/medio/2019/12/11/coliseo-roma_2924b6ae_1280x720.jpg'
}

The issue is that the console.log message is appearing four times, indicating that the function is being called repeatedly. Any insights into what could be causing this?

Here is a link to a reproducible example: https://stackblitz.com/edit/angular-ivy-d5hdmo?file=src%2Fapp%2Fapp.component.html

javascript angular typescript

Answer 1

Answer №1

It's important to note that when change detection runs in your HTML, all functions will be called automatically. The framework checks for any changes that could affect the variables in your code.

Calling functions directly in HTML can have consequences, especially if they are time-consuming or involve making HTTP requests. This can slow down your application and lead to excessive data retrieval from databases.

If you want to prevent automatic change detection on a component, you can use the OnPush strategy as shown below:

@Component({
    selector: 'my-component',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: ...
})
export class MyComponent {

With this strategy, your HTML will only update when change detection is explicitly triggered or when an @Input() variable is modified.

constructor(private changeDetectorRef: ChangeDetectorRef) {}

refresh() {
    this.changeDetectorRef.detectChanges();
}

For more information on change detection, check out these resources:

Example with the OnPush strategy

How does Angular 2 change detection really work?

The ultimate guide for Angular change detection

Answer 2

It's important to note that when change detection runs in your HTML, all functions will be called automatically. The framework checks for any changes that could affect the variables in your code.

Calling functions directly in HTML can have consequences, especially if they are time-consuming or involve making HTTP requests. This can slow down your application and lead to excessive data retrieval from databases.

If you want to prevent automatic change detection on a component, you can use the OnPush strategy as shown below:

@Component({
    selector: 'my-component',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: ...
})
export class MyComponent {

With this strategy, your HTML will only update when change detection is explicitly triggered or when an @Input() variable is modified.

constructor(private changeDetectorRef: ChangeDetectorRef) {}

refresh() {
    this.changeDetectorRef.detectChanges();
}

For more information on change detection, check out these resources:

Example with the OnPush strategy

How does Angular 2 change detection really work?

The ultimate guide for Angular change detection

Answer 3

Answer №2

To achieve optimal results, it is recommended to employ a variable for binding the src attribute or any other attribute, and subsequently update the variable as necessary.

Answer 4

To achieve optimal results, it is recommended to employ a variable for binding the src attribute or any other attribute, and subsequently update the variable as necessary.

Repeated calls to Angular's <img [src]="getImg()"> frequently occur

Answer №1

Answer №2

Similar questions

Combine two scope arrays in AngularJS

Can the axios version be displayed during runtime?

Verify if the radio element is marked as selected in the AJAX reply

Transforming user-entered date/time information across timezones into a UTC timezone using Moment JS

The issue persists with `getServerSideProps` as it fails to retrieve data even when executed within the

Moving from the center to the bottom-right with a CSS transition

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

MySQL Entry Update Failure

Instead of showing the data in the variable "ionic", there is a display of "[object object]"

How can I sum up each array elements using a forEach loop in JavaScript?

Reloading the ASP.NET MVC bootstrap modal using Ajax for a fresh look

What method does the framework use to determine the specific API being accessed?

What is the best way to eliminate the first even number from a string?

How to toggling array object value in React or Redux state using Javascript/ES2015

Risks associated with the use of Base64 encoded URLs in relation to security

Content within a Row of a Data Table

How can I properly include DefinitelyTyped TypeScript definition files in a .NET Core project?

What is the reason why createServer() is often not recognized as a function?

Generate a table framework by dynamically adjusting the number of rows and columns

Angular 2 Release Candidate 6 - The element "sidebar" is unrecognized