Retrieve the image using the API

I've been attempting to incorporate this code to make an API call for an image, but unfortunately, I haven't been successful:

 <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImage(product.productImage)"
        [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
    </div>

Component:

mainImage(productImage: number) {
    this.productService.getProductImage(productImage);
  }

Service:

getProductImage(imageId) {
    return this.http.get<any>(environment.apiKey + '/engine/product/files/' + imageId)
  }

When I implement it like this:

<div class="col-xl-4 col-lg-6" *ngFor="let product of products">
      <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" image="http://123.123.122.1:8090/engine/product/files/{{product.productImage}}"
        [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
    </div>

Everything works as expected. Can you pinpoint where I might be going wrong?

angulartypescriptangular10

Answer №1

Your getProductImage function is set up to return an Observable, so don't forget to include the async pipe on your image @input parameter, as shown below:

<kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImage(product.productImage) | async"
    [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
</div>

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

Steps to automatically update a component when the button is clicked

Is there a way to change the displayed component in my parent component when clicking on a specific element? I currently have a pie chart component displaying by default but would like to switch it to another component with a different diagram when clickin ...

angularangular2-routing

Sending information to child components within the "router-outlet"

I have a parent component that communicates with the server and receives an object: // parent component @Component({ selector : 'node-display', template : ` <router-outlet [node]="node"></router-outlet> ` }) exp ...

angulardependency-injectionangular2-routing

Why do variables in an HTML file fail to update after being navigated within onAuthStateChanged?

Currently, I am working with Ionic 5 and Firebase. Everything is running smoothly until I implemented the onAuthStateChanged function to persist login for authenticated users. Here is the code snippet: this.ngFireAuth.onAuthStateChanged((user) => { ...

angulartypescriptfirebaseionic-frameworkfirebase-authentication

Can you explain the concept of TestBed in Jasmine?

Recently, I have started using Jasmine with Angular 2 and have encountered an issue while working with the TestBed object in my test cases. The error message reads as follows: Please call "TestBed.compileComponents" before your test. Can anyone advise on ...

angularjasminekarma-jasmineangular2-testing

Enhance user information by adding necessary fields

I often encounter situations where I need to select a specific entry from a set of data in a component, whether through a select box or as part of a table. However, the way I intend to utilize this data typically requires additional fields like the "label ...

angulartypescript

Developing with TypeScript, Next.js, and Socket.io

Embarking on a new endeavor utilizing TypeScript, Next.js, and Socket.io has left me puzzled on how to integrate these technologies seamlessly. My project consists of the following files: /api/socket.ts: import { NextApiRequest, NextApiResponse } from &ap ...

javascriptnode.jstypescripttypesnext.js

The attribute 'finally' is not found on the data type 'Promise<void>'

I've been attempting to implement the finally method on a promise but continue running into this issue. Property 'finally' does not exist on type 'Promise<void>'. After researching similar problems, I found suggestions to a ...

angulartypescriptionic-frameworkes6-promise

Triggering an event within a component to execute a specific function in another component

I am working on a component that includes multiple routes such as home, app, and navbar. My goal is to have the encrementcalc() function execute when the navbar button is pressed. I attempted to use the event emitter but was unsuccessful. Can someone prov ...

angulartypescript

What are some best practices for managing object-level variables in TypeScript and Vue.js?

Uncertain about the optimal approach, I am looking to create a component and leverage some object level variables. Consider the example below: import Vue from "vue" import * as paper from "paper" export default Vue.extend({ template: ` <d ...

javascripttypescriptvue.jsvuejs2

How to dynamically add a class in Angular 2 based on an array of strings?

I've been working on generating a list using an array in the component: billChecklist = [ { title: "mortgage", every: "1st", amount: "$1300", status: "paid" }]; My HTML involves a For LET loop that is functioning we ...

angularconditional-statementsangular2-template

Refining types in a series of statements

I'm attempting to merge a series of assertions in a safe manner without the need to individually call each one. For instance, consider the following code: type Base = { id: string, name?: string, age?: number }; type WithName = { name: string }; type ...

typescript

Implementing dynamic background images in Angular 4 using div placeholders

Is there a way to include a placeholder or default image while waiting for item.imgSrc to load on the screen? <div class="style" *ngFor="let item of array; <div [style.backgroundImage]="url('+ item.imgSrc +')" class="image">< ...

htmlcssangular

Trouble navigating through an index of elastic data? Learn how to smoothly scroll with Typescript in conjunction with

I'm currently using the JavaScript client for Elasticsearch to index and search my data, but I've encountered an issue with using the scroll method. Although I can't seem to set the correct index, I am confident in my technique because I am ...

node.jstypescriptelasticsearchscrollrequest

Using TypeScript with Vue in a non-component-based architecture

Recently, I've been facing a challenge while developing an application. I'm using Vue + Vuetify with typescript, but I'm trying to steer clear of creating a single-page application or using webpack to handle .vue components. My goal is to cr ...

typescriptvue.jsvuejs2vuetify.js

Node.js is having trouble retrieving information from the SQLite database

Here's a simple code snippet I'm using to retrieve data from my sqlite database. Index.ts: import { Database } from './Class/database'; Database.checkIfExists("some ID"); Database.ts: export class Database { static sqli ...

node.jstypescriptsqlite

In what situations might a finally block fail to execute?

Are there any circumstances where the code in a finally block may not be reached, aside from the usual suspects like process exit(), termination signal, or hardware failures? In this TypeScript code snippet that usually runs smoothly in node.js, occasiona ...

javascriptnode.jstypescript

If an error occurs during ng lifecycle hooks, router.navigate will not function correctly

I've developed an ErrorHandler specifically for logging exceptions and then redirecting the user to a generic error page. However, a recurring problem arises when the exception occurs within a lifecycle hook or constructor method. Take for example the ...

angularangular2-routing

There was an issue detected in the ./node_modules/@angular/core/esm5/core.js file: Module cannot be located due to TypeError indicating that dep.isEqualResource is

I recently updated the package.json in my Angular Project using the command ncu -u. However, after the update, I encountered the following error when running ng serve: ERROR in ./node_modules/@angular/core/esm5/core.js Module not found: TypeError: dep.isE ...

node.jsangularwebpackangular-cli

The promise briefly returns a placeholder object before resolving with the actual response

Currently, I am working on a simple check to determine whether myAnswer contains an answer. The checking functionality is operating smoothly; however, the issue arises in the final function that aims to return the string obtained from myAnswer. Instead of ...

typescriptpromise

The argument type 'Object' is incompatible with the parameter type 'string' in Ionic Angular

Encountering an issue while attempting to parse with JSON as I receive the following error message: Argument of type 'Object' is not assignable to parameter of type 'string'. import { Component, OnInit } from '@angular/core'; ...

angularionic-framework