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

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

Tips for real-time editing a class or functional component in Storybook

Replacing one <div> with another <div> using a clickable link within the divs

The Battle of Identifiers: Named Functions against Anonymous Functions in TypeScript

Partial data is being received from the Ajax call

When utilizing jQuery to add a <li> element, it suddenly vanishes

Failure of AJAX to transmit variable to PHP script

Upgrading Angular causes issues with fileReplacements not functioning properly for assets

Communicating between different components in Angular 11 using a service to share data

Arranging Pipe Methods in RxJS/Observable for Optimal Functionality

Can someone assist me in figuring out how to solve selecting multiple radio buttons at once

When attempting to navigate to a controller using Express.Router and Passport, encountering an undefined error with req.url.indexOf('?')

Unable to click on element at specific location

Setting up a Form submit button in Angular/TypeScript that waits for a service call to finish before submission

Unable to add or publish text in CKEditor

Navigating to a URL parameter outside of the <router-outlet>

Utilizing a refreshed array of elements within a component directive

Entering the appropriate value into an object's property accurately

The parameter value in Angular routes is substituted with the parameter name in the AuthGuard's canLoad method

How to retrieve data from a JSON file in Angular 2 using the http get