What is the best way to utilize *ngFor for looping in Angular 6 in order to display three images simultaneously?

I have successfully added 3 images on a single slide. How can I implement *ngFor to dynamically load data?

 <carousel>
                <slide>
                  <img src="../../assets/wts1.png" alt="first slide" style="display: inline-block; width: 30%;padding-right: 10px">
                  <img src="../../assets/wts1.png" alt="second slide" style="display: inline-block; width: 30%;padding-right: 10px">
                  <img src="../../assets/wts1.png" alt="second slide" style="display: inline-block; width: 30%;padding-right: 10px">
                </slide>
                <slide>
                    <img src="../../assets/wts2.png" alt="second slide" style="display: inline-block; width: 30%;">
                        <img src="../../assets/wts2.png" alt="first slide" style="display: inline-block; width: 30%;">
                        <img src="../../assets/wts2.png" alt="second slide" style="display: inline-block; width: 30%;">
                      </slide>
                <slide>
                    <img src="../../assets/wts3.png" alt="third slide" style="display: inline-block; width: 30%;">
                        <img src="../../assets/wts3.png" alt="first slide" style="display: inline-block; width: 30%;">
                        <img src="../../assets/wts4.png" alt="second slide" style="display: inline-block; width: 30%;">
                      </slide>
              </carousel>
angularhtmlcssangular-materialcarousel

Answer №1

Using Typescript to group images

const displayImageGroups = this.yourImageArray.reduce((previous, current, index) => {
  if (index === 0 || index % 3 === 0) {
    previous.push([current]);
  } else {
    previous[previous.length - 1].push(current);
  }
  return previous;
}, []);

Displaying the grouped images in HTML using Angular directives

<carousel>
  <slide *ngFor="let group of imageGroups">
    <img *ngFor="let image of group" [src]="'https://' + image.src" [alt]="image.description" style="display: inline-block; width: 30%;" />
  </slide>
</carousel>

Check out the live demo here!

Answer №2

In Angular, there is no built-in feature for grouping elements in the template. One effective approach to accomplish this task is by utilizing the chunk function from lodash library (or a comparable method) to generate an array of arrays with the desired size, then iterating through the "outer" array.

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 issue with the Hidden Content feature in the Slick Carousel is that it does not function correctly on the

There are some related topics worth exploring, such as: Slick carousel center class not working when going from last item to first item Despite trying various solutions, the issue still persists in my code. My goal is to have each item displayed in the ce ...

javascripthtmljquerycssslick.js

Focusing on styling specifically for Chrome rather than Safari using SCSS

Is there a method to specifically target only Chrome browsers within a mixin in SCSS? @mixin { &:after { border-bottom:black; @media screen and (-webkit-min-device-pixel-ratio:0) { border-bottom: red; } } } Currently, this code targets bot ...

htmlcssgoogle-chromesafarisass

Here's a guide on how to retrieve the element type or tag type in Selenium using C#

Let's say we have a tag like this: <a class = "fp-anchor fp-forgot-password pull-right" href = "/Account/ForgotPassword">Forgot Password?</a> == $0 In order to determine the type of element, we need to identify if it is a hyperlink. For ...

c#jqueryhtmlselenium

Using regular expressions in PHP to identify HTML elements containing '<p>' that appear after the initial '<H1>' tag

Can you provide guidance on creating a Regular Expression in PHP to identify HTML <p> elements that come after the initial <H1> tag? Here's an example that checks for inequality with the expression: if(!preg_match_all('#<p(.*?)&l ...

phphtmlregex

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...

javascriptphpjqueryhtmljson

The Angular filter feature operates on individual columns instead of filtering all columns simultaneously

Introduction I am currently working on implementing a feature in my Angular application where the column filter continuously updates the results based on the selected filters. The issue I'm facing is that when I select a filter in one column, it corr ...

angulartypescriptif-statementfilterangular-material

My observations on CSS challenges in IE7/8 and the Hashchange plugin

What is causing these float issues in Internet Explorer? Additionally, has anyone had any experience with 'jquery.ba-hashchange.min.js' and know how to make the hashchange function more visually appealing? Thank you! ...

cssinternet-explorercss-floathashchange

The appearance of the drop-down menu in IE is not the same as in other

I have implemented css bootstrap 3.2.0 on my website. However, I have noticed some discrepancies when viewing the site in Internet Explorer. The menu options have a thick black border and the dropdown menu button appears different compared to other browse ...

csstwitter-bootstrap

Tips for seamlessly placing a div with a background image within a parent container, all while preventing any scrolling issues as the child div rotates

I created a simple demo featuring a square image with rounded corners to give it a circular appearance. The image rotates slowly, but as it moves diagonally, the horizontal width fluctuates, causing the parent container to resize. I want the parent contain ...

htmlcss

Retrieving Data from API in Angular 6/7 upon Navigating Back to Previously Visited Page

I'm currently navigating my way through angular and encountering a small hurdle. I aim to guide a user to a data entry page where most fields are pre-filled by retrieving data from the database based on a record id. The user then modifies some fields, ...

angularangular-routingangular-router

Error: invalid syntax found in the expression "path". This issue is specific to Angular 4

I encountered an issue while trying to utilize routerLink with a value from a property in my component. ERROR: Syntax error, unrecognized expression: /configuration/reservations at Function.Sizzle.error (scripts.bundle.js:1581) at Sizz ...

node.jsangularangular4-router

Sharing a value across an entire angular 11 project: Best practices

I am facing an issue with my Angular project. After logging in and saving the user data to local storage, I want to share it across the entire project without having to import UserService in every component or template. Can someone provide guidance on how ...

angular

What is causing iframes to fail on some websites?

Recently, while I was experimenting with a jQuery tutorial, I encountered an issue where iframes were not working as expected. Surprisingly, only the iframes from w3schools seemed to work fine, leaving me confused about what could be causing the problem. & ...

htmliframe

Can metadata be attached to data models in Angular for annotation purposes?

Looking to add some metadata annotations to a simple data model export class Certification { title: string; certificationType?: CertificationType; validTo?: number; description?: string; externalIdentifier: Guid; constructor() { ...

angulartypescriptmetadata

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

cssreactjsreact-bootstrap

When attempting to access the callback response with HTML tags from the server, the AJAX request in jQuery fails

I am currently facing a challenge while working on an ajax form submission that returns Json response. Everything functions smoothly except for a specific situation where I need to include HTML content in the response, such as a URL link for users to acces ...

jqueryhtmlajax

Expanding the width of a bootstrap dropdown menu

Looking for advice on how to expand the dropdown width? I have a row with two columns and some JavaScript that handles the dropdown functionality. The issue I'm facing is that I can't figure out how to adjust the dropdown width when it's se ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

javascripthtmlcssajax

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

Currently, I am rendering a block of HTML and directives using $sce.trustAsHtml. To achieve this, I utilized a directive called compile-template which enables the use of ng-directives like ng-click and ng-disabled. While it is possible for me to pass sta ...

javascriptjqueryhtmlangularjsfor-loop

Items that do not commence from the start of the list

I'm encountering an issue with my unordered list where the li elements are not rendering properly. The first element seems to have a margin, and I'm unsure why this is happening. How can I fix this problem? function App() { return ( < ...

htmlcssreactjs