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

What is preventing me from updating one dropdown list based on the selection made in another dropdown list?

I have a situation on a classic asp page where there are two dropdown lists: <select id="ddlState" name="ddlState" runat="server"> <option value="KY">Kentucky</option> <option value="IN" ...

javascripthtml

Incorporating an SVG Element into a design while ensuring its responsive functionality

I tried adding an SVG wave type picture to my background and making it responsive, but encountered some issues. I wanted to enhance the look of my existing background image by incorporating a wave design. However, when I zoomed in on the website, the new a ...

htmlcsssvgresponsive-design

How can I ensure a DIV is shown on every sub-page?

Is there a way to dynamically display a <div id="chatbox"> in all subpages without needing to manually edit each one? For example, adding this code to the main index.html file and having it appear on /products/index.html. ...

htmlcssindexing

Difficulty in utilizing Jasmine spy on Capacitor Plugin within an Ionic application

I am in the process of setting up a unit test for an Ionic App. Here is the snippet from my specs: it('should not affect status bar on browser', async () => { spyOn(Plugins.StatusBar, 'setStyle'); const service: AppService = Te ...

angularionic-frameworkjasminecapacitor

Tips for integrating a "datetime" picker in your AngularJS application

Currently working on an AngularJS application. The single page has a date input that needs to be added. Date Input <input type="date" ng-model="InputDate" /> Any suggestions on how to accomplish this task? ...

angularjshtmlinputtwitter-bootstrap-3datetimepicker

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

Achieve the positioning of a Bootstrap navbar within a div without it getting wrapped by following

I have been attempting to overlay my navbar on top of a background image by nesting it within a div and using absolute positioning. However, I've run into an issue where the navbar-header/navbar-brand section causes the rest of the navbar to wrap onto ...

htmlcsstwitter-bootstrap

Transitioning between sections by clicking on a navigation menu item

I'm looking to create a cool animation effect on my website. When a user clicks on a specific menu link, such as "about-section," I want the page to smoothly scroll down to that section in a parallax style. If anyone knows of a jQuery plugin that cou ...

jqueryhtmlcssjquery-pluginsparallax

Eliminate the outline of the pager row in an asp.net grid view

Within my grid view, I have applied a bottom border to all cells. However, this border is also appearing on the pager row, which is not desired. To address this issue, I attempted to use jQuery to remove the border, but it seems that my selector is incorre ...

jqueryasp.netcssgridview

Issues encountered while sending HTML Form data to MySQL with Node JS

I have been experimenting with a basic html form to mysql using nodejs, but unfortunately it is not functioning as expected. The HTML file is named index.html and the Node.js file is called test.js. Below you can find my code: My HTML <!DOCTYPE html&g ...

javascripthtmlmysqlnode.jsforms

Ensure that both tables contain columns of equal size

I am facing a challenge with 2 HTML tables that are positioned directly on top of each other. Each table has the same number of columns, however, the text within them may vary. Additionally, both tables can consist of multiple rows. My goal is to ensure th ...

htmlcss

Submission handling with JQuery forms is not functioning

Currently troubleshooting my jQuery contact form submission handler. For some reason, the code isn't working as expected and I'm not sure where the issue lies. Upon form submission, there should be a success or error alert displayed, but nothing ...

htmljquery

Ways to remove scroll bars from a textarea in JavaFX

Is there a way to disable the scrollbars on a TextArea element? I managed to remove the horizontal scrollbar by using: TextArea.setWrapText(true); However, I am struggling to disable the vertical scrollbar - all I can do is hide it. My goal is to hav ...

javacssjavafx

centered logo in a flexbox header

Having trouble with Flex for the first time. Despite reading and experimenting, I still can't figure it out. Any suggestions on how to accomplish this? Check out an example ...

cssflexbox

When I engage with the input field, it ceases to be in focus

Here is the code I've been working on: https://github.com/Michael-Liendo/url-shortener/blob/main/src/pages/index.js If you want to see the issue for yourself, check it out at: ...

javascripthtmlreactjsnext.js

I am having trouble generating a TikTok page link due to the presence of an @ symbol, although all other links are functioning correctly. Can anyone provide a solution to this issue?

I am currently developing a website using primarily HTML within a Blazor application on Visual Studio. I have encountered an issue with the code where the first two buttons function correctly, but there is an error regarding the @ symbol in the TikTok butt ...

htmlhyperlinkblazortiktok

Creating a custom transition rule in Stylus: A step-by-step guide

I need help creating a generic transition rule in Stylus. My current function is only working in specific cases, where it returns a string 'all ease-in-out 0.2s' instead of a proper CSS rule. This approach is not effective when trying to use it i ...

cssgenericsstylus

Allow only specified tags in the react-html-parser white list

Recently, I've been working on adding a comments feature to my projects and have come across an interesting challenge with mentioning users. When creating a link to the user's profile and parsing it using React HTML parser, I realized that there ...

javascripthtmlreactjstypescript

Pull HTML code from element using XPath in Python Selenium

I want to extract HTML codes from a specific element using XPath. Here is the XPath: //*[@id=":nn"]/div[1] Additionally, I need to download an image from the same element. What is the best way to retrieve these HTML codes? ...

pythonhtmlseleniumxpath

Adjusting the line height of an inline-block div causes surrounding inline-block siblings to shift downward

As I venture into exploring the line-height property, I came across information on MDN which stated: For non-replaced inline elements, it determines the height used in calculating the line box height. However, in this scenario, when I set the line-heigh ...

htmlcssline-height