Is there a way to display a variety of images on separate divs using *ngFor or another method?

I have created a custom gallery and now I would like to apply titration on the wrapper in order to display a different image on each div. Currently, my code is repeating a single image throughout the entire gallery.

HTML

<div class="wrapper" *ngFor="let data of collection" >
  <div class="row mt-5 paddingP">
    <div class="col-4 top3images " >
      <img class="top3"
        src={{data.completeIamgepath}}
        alt="">
      <button class="icon"><i class="fa fa-bookmark-o" aria-hidden="true"></i> </button>
      <label class="label">207 Products</label>
    </div>
    <div class="col-4 top3images">
      <img class="top3 " src={{data.completeIamgepath}} alt="">
      <button class="button"> Save </button>
      <label class="label">207 Products</label>
    </div>
    <div class="col-4 top3images">
      <img class="top3 "
      src={{data.completeIamgepath}}
        alt="">
      <button class="icon"><i class="fa fa-bookmark-o" aria-hidden="true"></i> </button>
      <label class="label">207 Products</label>
    </div>
  </div>

 

  <div class="wrapper paddingrightleft  secondrowmargintop ">
    <div class="row paddingR">
      <div class="col-7">
        <div class="row">
          <div class="col-12 padding0 ">
            <img class="imgs2ndrow"
            src={{data.completeIamgepath}}
              alt="">
            <button class="button"> Save </button>
            <label class="label">107 Products</label>
          </div>
        </div>
angulartypescripthttpngfor

Answer №1

It appears that in your template, you are anticipating images from the "collection" to be shown. Have you verified that there are indeed distinct pictures in your collection? To confirm this, try displaying {{collection | json}} in the template. If there are truly different images in the field "data.completeIamgepath", then make sure to close the template properly before checking further. The example code snippet provided is incomplete as your div with class "wrapper" is unclosed.

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

Barreling is essential for TypeScript custom paths to function properly

This morning has been dedicated to exploring ts-paths in order to shorten my import paths. After some experimentation, I have found that custom paths do work IF you set up barreling (having an index file that exports your modules) root ├── client ...

angulartypescriptpathangular-module

The value of an Angular array seems to be disappearing after being copied to another array and then cleared

I have encountered an issue while working with arrays. I am initializing two arrays - one with some values and another as empty. However, when I assign the items from the first array to the second array and then clear the first array, it unexpectedly clear ...

angulartypescript

Proper method of retrieving a property as a designated type within a union type

I have a scenario where I need to return a specific property from a function in various parts of an application. This property can fall into one of two categories, each with string literal properties. One category is an extension of the other. How can I ...

angulartypescripttypescasting

Performing asynchronous HTTP requests in Angular2

Following the example of Jhon Papa's quick start program, I have created a sample application. In this application, I have designed a service class to fetch JSON data from my REST service at http://localhost:8081//Myserver/rest/heros. import { Inject ...

node.jsangular

Query parameters in Angular 5 that have a global scope

Adding a global query parameter to every path of the application is my goal (such as /my/path?config=foo). I prefer not to use the option to preserve query params because I only want to retain this specific one. The application operates with various confi ...

angularroutesquery-string

Setting a default value in a select tag with ngModel in Angular 6

I am currently working with Angular 6 and have the following code snippet: <select class="form-control form-control-sm" #ig="ngModel" [(ngModel)]="assetFormDetails.ig"> <option value="" >S ...

angular

Error occurs in Angular 10 when reloading IFrame

My goal is to fetch the HTML string from an API and update an iframe with that string. The code works perfectly for the first load, but when the onBtnClick method is triggered a second time, it throws an error: VM3012:1 Uncaught SyntaxError: Identifier &ap ...

javascriptangularangular10

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

I've been troubleshooting an issue with a Nuxt.js module that should add a plugin only if process.server is true, but for some reason it's not working as expected. I attempted to debug the problem by logging process.server using a typescript modu ...

javascriptnode.jstypescriptnuxt.js

Detecting changes in an ondrop event triggered by a modification in object property

As I work on creating a drag and drop interface, I realize the importance of implementing change detection for smooth functionality. Below is a snippet of my component: import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; impor ...

angular

JavaScript/Typescript is throwing an error because it is unable to access the property 'username' of an undefined object

In my project, I am attempting to compile a list of Profile objects and then extract specific elements from each object in the list. To accomplish this, I have defined a public interface named Profile, imported it into my component, and instantiated a new ...

javascriptangulartypescript

How can I set ion-option to be selected by tapping instead of having to click OK?

Currently, I am developing a mobile application and have encountered a scenario in which I utilized ion-option with ion-select, resulting in successful functionality. However, I am now aiming to remove the OK/CANCEL button so that users do not need to clic ...

angularionic2

Steps for integrating a universal loader in Angular

My implementation of a global loader is as follows: In the CoreModule: router.events.pipe( filter(x => x instanceof NavigationStart) ).subscribe(() => loaderService.show()); router.events.pipe( filter(x => x instanceof NavigationEnd || x in ...

javascriptangularrxjsangular-cdk

Error message from webpack: It appears you are missing a necessary loader to handle this specific file type

I'm struggling with building my server.ts typescript file for the backend. I have some imports, but my app is not building. Here is a snippet from my typescript file: import * as Express from 'express' import * as Session from 'expres ...

node.jstypescriptwebpack

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

I'm having trouble phrasing this question differently, but I am seeking assistance in comprehending how to address this issue. The error message I am encountering is as follows: TypeError: _co.create is not a function TypeError: Cannot read property ...

htmlangulartypescript

What steps can be taken to properly set up routing in Angular 4 in a way that organizes feature-modules routes as children in the

Organizational layout of projects: /app app.module.ts app.routing.ts : : /dashboardModule /manage-productModule manage-product.module.ts manage-product.routing.ts Within 'app.routing.ts' [ { path : '&a ...

angularangular-routingangular-module

Show the value in Angular in a dynamic way

My template needs to display the text 'Passed' only if item.name === 'michael' is not true. The component receives data in an array called courses[] from its parent. There are two interfaces, Courses and Teachers, where each course ID h ...

angulartypescript

Splitting code efficiently using TypeScript and Webpack

Exploring the potential of webpack's code splitting feature to create separate bundles for my TypeScript app has been a priority. After scouring the web for solutions, I stumbled upon a possible lead here: https://github.com/TypeStrong/ts-loader/blob/ ...

javascripttypescriptwebpackcode-splittingts-loader

JavaScript Electron application: Identifying the essential directories to include in a Git repository

When developing an Electron app using node.js and the CLI, numerous directories and files are automatically generated in the project directory. However, many of these files may not be necessary to save in my git repository. How do developers typically han ...

angulargitelectron

Guide to exporting (and using) JSDoc annotations in TypeScript NPM packages

Looking to enhance my skills in creating npm packages with TypeScript. I have a small project available at https://www.npmjs.com/package/lynda-copy-course/, and so far, the project structure is successful in: being executable from the command line after ...

typescriptnpmvisual-studio-code

Angular 7's Singleton Service Feature

My service setup looks like this: export abstract class ILoggingService { // abstract functions here } export class LoggingService implements ILoggingService { // service implementation } export class MockLoggingService implements ILoggingServic ...

angulartypescriptsingleton