Passing the product ID from Angular to another function in order to retrieve the corresponding product image ID

I'm trying to figure out how to send the ID of a product from a database to the getImage function. I want the function to use this ID to find and display the image associated with that product.

HTML

  <div class="container-fluid first" style="cursor: pointer;" data-toggle="modal" data-target="#modalPoll" >
      <div class="row tab-pane Galeria">
        <div *ngFor="let product of products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
          <div class="image-item" (click)="fillModal($event, product)">
              <a class="d-block image-block h-100" >
              <homeImage> 
                <img *ngIf [src]="Images" class="Images img-fluid" alt="">
              </homeImage> 
              </a>           
            <div class="ImageText"> {{product.name}}</div>
          </div>
        </div>
      </div>
    </div>
angulartypescript

Answer №1

Based on my interpretation, the function can be invoked by providing the identification.

DisplayImage(product.id)

An alternative approach is to retrieve the path from this function and use it as the source.

Here is an example:

<img [src]="DisplayImage(product.id)"/>

Answer №2

  <img *ngIf [src]="retrieveImage(id)" class="Images img-fluid" alt="">

Create your image tag using the code above and ensure that the retrieveImage function fetches the specific image as demonstrated below.

  retrieveImage(id) {
      var self = this;
      self.Global.refreshToken().subscribe(function (result) {
        self.homeService.fetchImage(id).then(function (response) {
          if (response) {
            return response;
          }
        }).catch();
      });
    }

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

Elements are unresponsive to scrolling inputs

My Ionic 2 input elements are not scrolling to the top when the keyboard is shown. I've tried everything I could find on Google, making sure the keyboard disable scroll is set to false. However, I still can't figure out what's causing the sc ...

javascripthtmlcsstypescriptionic2

AngularFire 2 dispatching email for password reset

I am looking to add a feature for resetting passwords or handling forgotten passwords using AngularFire2. It looks like the function sendPasswordResetEmail is either not available in AngularFire2 or the typings have not been updated yet. I tried accessing ...

typescriptangularangularfire2

Retrieve all values of a specific enum type in TypeScript

When working with Typescript, I am looking to retrieve all values of an enum type and store them in an array. In C#, a similar method would look like this: public static TEnum[] GetValues<TEnum>() where TEnum : Enum { return Enum.GetValues(typeof ...

typescript

Is there a way to automatically set all object properties to false if one property is set to true in React?

The Issue: My task at work involves creating 3 buttons with separate filters to display different tickets in a table. All the functionality is completed, and the filtered tickets are displayed correctly. However, I am facing an issue that is preventing m ...

javascriptreactjstypescriptobject

A guide on transforming a string into an array of objects using Node.js

Hey everyone, I have a single string that I need to convert into an array of objects in Node.js. let result = ""[{'path': '/home/media/fileyear.jpg', 'vectors': [0.1234, 0.457, 0.234]}, {'path': '/home/med ...

javascriptnode.jsarraysjsontypescript

Ensure that the bar width in react-chart-js-2 remains consistent regardless of the number of bars displayed

Currently, I am developing a React Chart JS component that displays a set of horizontal bars. My objective is to maintain the width of the bars at a consistent size regardless of the number of bars present (e.g., all bars at 30px). However, when additiona ...

htmlcssreactjstypescriptchart.js

My application is functioning properly, yet Angular keeps throwing an error

I created a data filtering pipeline that functions perfectly, but I am encountering an error. Why is this happening? The error message: ERROR TypeError: Cannot read property 'filter' of undefined at FilterPipe.push../src/app/filter.pipe.ts. ...

angular

Display Mongoose relationships using ngFor loop

I've been working with this user.js model const userSchema = new Schema({ name: String, ... skills: [{ type: Schema.Types.ObjectId, ref: 'skill' }] }) and also the skill.js model const skillSchema = new Sc ...

angularmongooseassociationsmongoose-schemamongoose-populate

Creating Powerful Angular 2 Directives Using JQuery and Select2

I have a few <select class='select'> elements in a component. Following a template that styles selects with a third-party library called Select2, the code snippet for initializing Select2 using HTML, jQuery, and Select2 is: $( document ). ...

angularangular2-directives

Effortlessly sending information to the Material UI 'Table' element within a ReactJS application

I have integrated a materialUI built-in component to display data on my website. While the code closely resembles examples from the MaterialUI API site, I have customized it for my specific use case with five labeled columns. You can view my code below: h ...

javascriptreactjstypescriptmaterial-uireact-props

Utilizing the location.state property within individual components by leveraging react-router-dom

I'm exploring the possibility of defining the type of the location.state for a specific stateless component. While I came across articles that touch on the RouteComponentProps type, I'm still unclear on the specifics. For example, let's say ...

reactjstypescriptreact-router-dom

Tips and Tricks for Setting Up Angular 2

I'm currently attempting to set up Angular 2 following the official Angular 2 documentation and various resources, but I'm encountering some roadblocks. Can anyone offer guidance on configuring the Angular 2 environment in Visual Studio or anothe ...

angular

Transmit data from a child component to a Vue JS page through props, and trigger the @blur/@focus function to access the prop from the parent component

Seeking guidance on working with props in Vue JS. As a newcomer to Vue, I hope that my question is clear. I've included my code snippet below, but it isn't functioning correctly due to missing Vue files. In my attempt to use a prop created in t ...

typescriptvue.js

Trigger a function upon change of selected value in Ionic 3

Here is some HTML code to consider: <ion-select interface="popover" [(ngModel)]="selectV"> <ion-option *ngFor="let human of humans" [value]="v.id">{{v.name}}</ion-option> <ion-option onChange="openModal()">GO TO THE ...

angularionic3

Tips for updating the display after making an angular $http request using rxjs Observables

I have a project where I am utilizing angular's $http service to fetch data from a remote endpoint. I am keen on incorporating rxjs Observables, hence the call in my service is structured as follows: userInfo() : Rx.Observable<IUserInfo> { ...

angularjstypescriptrxjs

Unable to perform a union operation that combines multiple enums into one

Here is a basic example: export enum EnumA { A = 'a', } export enum EnumB { A = 'b', } export class SomeEntity { id: string; type: EnumA | EnumB; } const foo = (seArray: SomeEntity[]) => { seArray.forEach((se) => { ...

angulartypescript

Updating the variable in Angular 6 does not cause the view to refresh

I am facing an issue with my array variable that contains objects. Here is an example of how it looks: [{name: 'Name 1', price: '10$'}, {name: 'Name 2', price: '20$'}, ...] In my view, I have a list of products bei ...

javascriptangulartypescriptbinding

Failed connection between Angular and Firebase for push notifications

I have integrated a firebase Service worker into my Angular app to receive cloud messages from Firebase Cloud Messaging. However, I am facing an issue where, when the notification is received while the app is running in the background and I click on it, th ...

angularfirebasepush-notification

Modifying styles/css in Angular2 using JavaScript results in a temporary change in styles before ultimately reverting back to the original styles

Recently, I encountered an issue while trying to change styles for some elements in Angular 2 using JavaScript. Interestingly, when the view is loaded, the height is initially set to maxHeight = 100, but after a few milliseconds, it reverts back to the o ...

angularangular2-templateangular2-directives

Is it possible to show elements from an ngFor loop just once when dealing with a two-dimensional string array in a display?

I have an array of nested strings, and I am attempting to display the contents of each inner array in a table format. My goal is to have the first table show the values from the first index of each inner array and the second table to display the values fro ...

htmlangular