Retrieving source in Angular from an async function output within a specified time limit

I have a quick query :). I'm attempting to retrieve the image src from an async function, but so far, I haven't had much success. This is what I have:

<img [src]="getProductImage(articleNumber)"/>

and in my TypeScript file:

public async getProductImage(articleNumber:string): Promise<string> {
let result = await this._Service.product(articleNumber);
debugger;

return result.imageFullUrl
}

While debugging, I can see that result.imageFullUrl is populated, but after that my page freezes and becomes unresponsive. Any thoughts on what might be going wrong?

angulartypescript

Answer №1

  1. When binding a function or expression to a property using default change detection strategy, the function may be triggered multiple times during each cycle. This can lead to performance issues and an unresponsive application.

  2. A better approach is to initialize a variable in the controller to hold the image source data and then use it in the template.

Controller

public imageSrc: any;

ngOnInit() {
  this._Service.product(articleNumber)
    .then(result => { this.imageSrc = result.imageFullUrl; });
}

Template

<img [src]="imageSrc"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTTP post method is not consistently triggering

Currently, I am in the process of developing a logout feature for angular (with a spring backend). The logout action is triggered by sending an HTTP post request to /auth/logout, where the endpoint invalidates the auth-token and refresh-token HTTP-only coo ...

angularspring

How can you retrieve the keys of an object that conforms to an interface?

In the following demonstration, we have two objects - KEYS and KEYS2. When importing KEYS in index.ts, autocomplete suggestions are available for K1 and K2 because KEYS does not adhere to an interface. On the other hand, with KEYS2, autocomplete is not pr ...

javascriptangulartypescript

What is the best way to transmit a JSON object to REST services using Angular?

Whenever I attempt to send the JSON object to REST services, I encounter an error that looks like this: http://localhost:8080/api/v1/cardLimit 400 (Bad Request); JSON Object Example: public class GameLimit implements Serializable { private stati ...

javaangularjsjsontypescript

The Angular Validator Pattern may be effective in HTML, but it seems to encounter limitations when

In the world of HTML, Regular Expressions can be quite useful as demonstrated in the example below: <input type="text" formControlName="mgmtIP" class="input-text" pattern="([01]?\d\d?|2[0-4]\d|25[0-5])\.([01]?\d\d?|2[0-4]& ...

regexangularvalidation

Detecting typescript syntax errors: checking for if statements and calling class methods

When I'm debugging, I've noticed that the silly mistakes I make are often the hardest to spot. For example: if (id = userId) {..} And in class methods: let result = myClass.doThis; Oddly enough, VSCode doesn't catch these errors during co ...

typescriptvisual-studio-codetslinttypescript-eslint

Different ways to pass a component function's return value to a service in Angular

On my HTML page, I am presenting job details within Bootstrap panels sourced from a JSON array using an ngFor loop. Each panel showcases specific job information along with a unique job ID. The panel is equipped with a click event which triggers the execut ...

angulartypescriptapi

Including a hyperlink in a table using Angular 8

I have a table with multiple columns, one of which is the "documents" column that contains downloadable files. How can I make just the document name clickable as a link? HTML <p-table #dt3 [columns]="colsPermessi" [value]="permessi" [paginator]="true" ...

angularhtml-tablehyperlinkdownloadprimeng

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

An illustration of this issue is the <foot-note> custom web component that was developed for my new website, fanaro.io. Normally, in-page linking involves assigning an id to a specific element and then using an <a> with href="#id_name&quo ...

javascripthtmltypescriptweb-componentnative-web-component

Utilizing Nodemailer and ReadableStreams to send email attachments stored in S3

My current challenge involves sending emails with Nodemailer that include attachments hosted in S3, utilizing JS AWS SDK v3. The example provided in the Nodemailer documentation demonstrates how to send an attachment using a read stream created from a file ...

node.jstypescriptamazon-s3nodemailer

Using Angular to make a request to a NodeJS+Express server for a simple GET operation

I need help with making a successful GET request from my Angular component to a NodeJS+Express server. someComponent.ts console.log("Before"); // send to server console.log(this.http.get('/email').map((res:Response) => { console.log(" ...

javascriptnode.jsangularexpressroutes

Upgrade your AngularJS codebase with Angular 2+ services

Attempting to adapt an Angular 2+ service for use in an AngularJS project. app/users.service.ts import { Injectable } from '@angular/core'; @Injectable() export class UsersService { private users: any = [ { id: 1, name: 'john&a ...

angularjsangularangular-servicesng-upgradeangular-upgrade

Passing parameters to an Angular 2 component

When it comes to passing a string parameter to my component, I need the flexibility to adjust the parameters of services based on the passed value. Here's how I handle it: In my index.html, I simply call my component and pass the required parameter. ...

javascripttypescriptangular

Angular2: Unable to locate the 'environment' namespace

After configuring my tsconfig.json, I can now use short import paths in my code for brevity. This allows me to do things like import { FooService } from 'core' instead of the longer import { FooService } from '../../../core/services/foo/foo. ...

angulartypescript

What is the best way to retrieve all designs from CouchDB?

I have been working on my application using a combination of CouchDB and Angular technologies. To retrieve all documents, I have implemented the following function: getCommsHistory() { let defer = this.$q.defer(); this.localCommsHistoryDB ...

angularjstypescriptcouchdb

Tips for developing a personalized form validator for validating JSON data exclusively in Angular

Within my Angular application, there exists a reactive form that has a single control known as configJson, which is visually represented by a <textarea> element in the DOM. The primary goal is to validate this specific form control to ensure that it ...

jsonangulartypescriptangular-reactive-formsangular-validation

Problem with Typescript and packages.json file in Ionic 3 due to "rxjs" issue

I encountered a series of errors in my Ionic 3 project after running ionic serve -l in the command terminal. The errors are detailed in the following image: Errors in picture: https://i.sstatic.net/h3d1N.jpg Full errors text: Typescript Error ';& ...

node.jstypescriptrxjs

Angular2 bootstrapping of multiple components

My query pertains to the following issue raised on Stack Overflow: Error when bootstrapping multiple angular2 modules In my index.html, I have included the code snippet below: <app-header>Loading header...</app-header> <app-root>L ...

javascriptangulartypescript

Learn how to pass JSON data into an anchor tag with Angular router link and the query parameters attribute set as "<a ... [queryParams]="q=|JSON|

As an Angular user, I am trying to populate a query parameter with a JSON object. <ngx-datatable-column name="Sku" prop="product.sku" [flexGrow]="0.5"> <ng-template let-row="row" let-value="value" ...

angulartypescriptangular2-routing

Analyzing reporting tools for a project using Angular 7

We're embarking on a new web project using Angular7 and need to select the right web-based reporting tools for creating system reports within the application, possibly allowing users to design their report templates on-the-fly. Despite extensive onlin ...

angularwebcomparisonreporting

What are the steps for encountering a duplicate property error in TypeScript?

I'm currently working with typescript version 4.9.5 and I am interested in using an enum as keys for an object. Here is an example: enum TestEnum { value1 = 'value1', value2 = 'value2', } const variable: {[key in TestEnum]: nu ...

javascriptreactjstypescripttypescript-eslint