Displaying maximum number of items in each row using ngFor

Is there a way to automatically create a new row within the 'td' element after the ngFor directive has generated 10 image repeats? Currently, all the images are displayed in a single td and as more images are added, they start to shrink.

<td *ngFor="let row of pics">
      <div class="checkbox">
          <label><input type="checkbox" [checked]="row.checked" value="{{row.url}}" (change)="addpic($event.target.checked, row.id)"></label>
       </div>                                 
       <img src="{{picroute}}{{row.img}}>
</td>
cssangularhtml-tablerepeat

Answer №1

<tr *ngFor="let page of [0,1,2,3,4,5,6,7,8,9,10,11,12].slice(0,pics/10)">
   <td *ngFor="let row of pics.slice(page*10,(page+1)*10">
      <div class="checkbox">
          <label><input type="checkbox" [checked]="row.checked" 
                     value="{{row.url}}" (change)="addpic($event.target.checked, row.id)">
          </label>
       </div>                                 
       <img src="{{picroute}}{{row.img}}>
   </td>
</tr>

Answer №2

Flex-box has proven to be quite versatile in my opinion. It offers great control over the shrink ratio and only requires a one-dimensional array, which is very convenient.

Answer №3

<td>
    <tr ng-repeat="item in splitContent(data, 5)">
        <td ng-repeat="content in item">
            <div class="checkbox">
                <label>
                    <input type="checkbox" 
                        [checked]="content.selected" 
                        value="{{content.value}}" 
                        (change)="updateSelection($event.target.checked, content.id)">
                </label>
            </div>                                 
            <img src="{{content.url}}"
        </td>
    </tr>
</td>

splitContent(data, itemsPerRow) {
    var splittedData = [];
    while (data.length > itemsPerRow) {
        splittedData.push(splittedData.splice(0, itemsPerRow));
    }
    splittedData.push(data);
    return splittedData;
}

This code provides a neat solution for organizing and displaying data effectively.

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

Tips for resolving: Dilemma - Angular configuration loaded in both synchronous and asynchronous manner

I recently updated my Angular 6 project to Angular 11. The project includes server-side rendering (SSR), and I am encountering an issue. After running ng run myapp:server, I am getting the following error: ✔ Server application bundle generation complete ...

angularserver-side-rendering

Organize the Div elements in the form of a message

Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...

htmlcsstwitter-bootstrap

Getting started with accessing an API using Angular 2

I am seeking a way to navigate outside of my Angular 2 application to mywebsite.com/api. This link should direct me to an API application hosted on the same server. Here is my current route configuration. export const routes: Routes = [ {path: '& ...

angularangular2-routingangular2-services

Animating the appearance and behavior of radio buttons using CSS transitions and JavaScript

My jQuery code allows me to fetch attributes from the .item element, but I'm having trouble with my CSS transitions not working as intended. To see the desired transition effect, try replacing .item with .item-tile. How can I make my CSS transitions ...

jqueryhtmlcssradio-button

Attempting a second filter of the table using the dropdown results in no data being returned

I've developed a CRUD app using Angular 7, and I'm facing an issue. When I select a dropdown item for the first time, it shows the desired table data. However, on selecting another item for the second time, it returns nothing. Below is my compone ...

angular

Sharing variables between parent and child components in Angular 2 Dart using router

How can I effectively share variables between a parent component with a router and a child component while keeping them updated through bindings? Here is a snippet of the code: app_component.dart: import 'package:angular2/core.dart'; ...

angulardartangular-dartangular-componentsangular2-dart

Deactivate the Mention and Hash tag in ngx-linkifyjs

I am currently utilizing ngx-linkifyjs to automatically convert URLs in text to clickable hyperlinks. However, I am facing an issue where it is also converting # and @ tags into links. Is there a way to prevent the conversion of # and @ while maintain ...

javascriptangulartypescript

width restriction to only accommodate on two lines

Whether my text is short or long, I always want to ensure that it remains within two lines by defining the width of my div. Short Text +-------------------------+ | Short text goes here | | Short text goes here | +---------------------- ...

jquerycss

Angular's isteven-multi-select Component: A Versatile Selection Tool

Is it possible to utilize isteven-multi-select with ng-model? My goal is to have certain items appear as chosen when the page loads using the isteven-multi-select module. I've tried using ng-model in the HTML page to populate the isteven-multi-select ...

javascriptangular

Guide to adding an optional parameter in the base href element within an Angular application

Hey there! I need to set an optional parameter so that either of the following URLs will work: http://myWebsiteName/myRouterPath or In this case, "mango" is the optional parameter. ...

angular

How to position a static element using CSS

I'm trying to align an image in the center of the screen, but I've run into some trouble. Typically, this is easy by setting the width of a div and using margin: auto;. However, I also need the div to have the position: fixed; property, which see ...

htmlcsspositionfixed

Discover the art of implementing linear gradient backgrounds in Tailwind css effortlessly

Is there a way to incorporate this specific color scheme into my background? linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%) I have knowledge on how to implement this color using regular CSS, but I'm curious about how it can ...

cssreactjsbackgroundtailwind-css

Do I need to be concerned about a bot attack if my form does not submit to a specific endpoint in a single-page application (SPA)?

My latest project involves a form with fields for email and password, but instead of POSTing the data, it simply calls a function upon submission. Although I'm using Angular, I wonder if I should be worried about potential bot attacks. Do you think I ...

angularformssecuritybots

Utilizing nested classes in CSS or SCSS for calling a class within another class

I am having trouble calling a class within another class. Can someone help me figure out how to do it? Here is the HTML code: <div class="main">Content</div> <div class="cover">Cover content</div> And here is t ...

css

Safari's problem with CSS transitions

This issue is specific to Safari, as it has been tested and works fine in Chrome, Opera, and Firefox. Upon hovering over a certain div (1), a child div (2) slides out by adjusting the left property. However, the child elements (buttons) within the second ...

javascriptcsssafaricross-browserwebkit

I'm having trouble getting my nav-tab to function properly in Bootstrap 4 when used with Angular 4. Can

I have been attempting to utilize Bootstrap 4 tabs with Angular 4 with the expectation that it would resemble and function similar to this example enter link description here However, my page is displaying like this. https://i.sstatic.net/dymNH.png Here ...

angularbootstrap-4

Comparing the Calculation of CSS Selector Specificity: Class versus Elements [archived]

Closed. This question requires additional information for debugging purposes. It is not currently accepting answers. ...

htmlcssangular

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Check out my attempt at solving this challenge on jsfiddle: http://jsfiddle.net/oca3L32h/ In the scenario, there are 3 divs within a main div. Each of these divs contains an image and they overlap each other. By using radio buttons, the visibility of the ...

javascriptjqueryhtmlcssimage

Angular 8 - Utilizing External URL Routing

After creating a route that generates a token, I encountered an error when trying to retrieve the token from the URL: if (!this.session.token) { let urlToken= 'https://www.url-system.com.br//auth&redirect_uri=http://8000/api/res-token'; let r ...

angular

Having difficulty connecting to the router within a container component for Angular2 routing

Presently, my code snippet looks like this: import { Router } from 'angular2/router'; @Component({...}) export class Index { constructor(public router: Router) { this.router.subscribe({...}); } } Although there are additional function ...

angularangular2-routing