cutting the limit of table rows in Angular by half

Question

cutting the limit of table rows in Angular by half

I have an array called carsList with 5 values. I am trying to slice it 2 by 2.

<table>
    <tr *ngFor="#item of carsList | slice:0:2; #i = index">
        <td>{{i}}. {{item}}</td>
    </tr>
</table>

The code above is only slicing 2 values at a time, but I actually want to slice 2 by 2.

 Example 

0   1
2   3
4   5

Here is the link to my code for reference:

https://plnkr.co/edit/BZnaSIldgO3Dmwao1mo6?p=preview

If you could please help me find where my mistake is, I would greatly appreciate it.

javascript angular typescript

Answer 1

Answer №1

When using the slice pipe, it may result in an array with 2 elements. However, when using ngFor to iterate over the elements in the array, the expected result may not be achieved.

To get the desired outcome, you can either adjust the structure of the array or implement a solution like this using an additional ngIf with a nested ngFor.

<table>
  <ng-container *ngFor="#item of carsList; #i = index">
    <tr *ngIf="i % 2 === 0">
      <td *ngFor="#item1 of carsList|slice:i:i + 2; #i1 = index" class="car-title">{{i1}}. {{item1}}</td>
    </tr>
  </ng-container>
</table>

Alternatively, you could remove the nested ngFor and manually create 2 td elements.

<table>
  <ng-container *ngFor="#item of carsList; #i = index">
    <tr *ngIf="i %2 === 0">
      <td>{{i}}. {{item}}</td>
      <td>{{ i + 1 }}. {{carsList[i + 1]}}</td>
    </tr>
  </ng-container>
</table>

Just so you know: ng-container can be utilized to group elements that are not included in the DOM tree.

Check out the updated plunker link.

Answer 2

When using the slice pipe, it may result in an array with 2 elements. However, when using ngFor to iterate over the elements in the array, the expected result may not be achieved.

To get the desired outcome, you can either adjust the structure of the array or implement a solution like this using an additional ngIf with a nested ngFor.

<table>
  <ng-container *ngFor="#item of carsList; #i = index">
    <tr *ngIf="i % 2 === 0">
      <td *ngFor="#item1 of carsList|slice:i:i + 2; #i1 = index" class="car-title">{{i1}}. {{item1}}</td>
    </tr>
  </ng-container>
</table>

Alternatively, you could remove the nested ngFor and manually create 2 td elements.

<table>
  <ng-container *ngFor="#item of carsList; #i = index">
    <tr *ngIf="i %2 === 0">
      <td>{{i}}. {{item}}</td>
      <td>{{ i + 1 }}. {{carsList[i + 1]}}</td>
    </tr>
  </ng-container>
</table>

Just so you know: ng-container can be utilized to group elements that are not included in the DOM tree.

Check out the updated plunker link.

Answer 3

Answer №2

The concept proposed by Pranav in his response touches upon the approach for achieving the desired outcome, although it appears that his plunker demonstration did not precisely mirror what was originally requested. Additionally, it seemed to be a bit overly complex.

A simpler solution, as shown in the original post's plunker (verified to work there), would be:

<ul>
 <ng-container *ngFor="#item of carsList; #i = index">
  <li *ngIf="i % 2 === 0">
   <span class="car-title">{{i}}. {{item}}</span>
  </li>
 </ng-container>
</ul>

Answer 4

The concept proposed by Pranav in his response touches upon the approach for achieving the desired outcome, although it appears that his plunker demonstration did not precisely mirror what was originally requested. Additionally, it seemed to be a bit overly complex.

A simpler solution, as shown in the original post's plunker (verified to work there), would be:

<ul>
 <ng-container *ngFor="#item of carsList; #i = index">
  <li *ngIf="i % 2 === 0">
   <span class="car-title">{{i}}. {{item}}</span>
  </li>
 </ng-container>
</ul>

Answer 5

Answer №3

Give this a go -

<ul>
 <ng-container *ngFor="#item of carsList; #i = index">
  <li *ngIf="i % 2 === 0">
   <span class="car-title">{{i}}. {{item}}</span>
   <span class="car-title">{{i+1}}. {{carsList[i + 1]}}</span>
  </li>
 </ng-container>
</ul>

Answer 6

Give this a go -

<ul>
 <ng-container *ngFor="#item of carsList; #i = index">
  <li *ngIf="i % 2 === 0">
   <span class="car-title">{{i}}. {{item}}</span>
   <span class="car-title">{{i+1}}. {{carsList[i + 1]}}</span>
  </li>
 </ng-container>
</ul>

cutting the limit of table rows in Angular by half

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing Typescript Decorators to dynamically assign instance fields within a class for internal use

Date Boxes in a Tangled Web

What is the most streamlined way to send data from HTML forms using solely JavaScript?

Is there a way to eliminate duplicates from an array in JavaScript by utilizing a set and placing each element in an li tag? Here is the code

Retrieve fresh information every 30 seconds utilizing the useQuery hook in React

It appears that the font in style.css is not being updated properly and seems to resemble

Angular Express encountering URL mismatch when retrieving files post-refresh

Updating React state using a form input

Unable to retrieve button value with material-ui package

ES6 Update: Manipulating Nested Arrays with JavaScript

Utilizing a router to control a GET request for accessing an image file

Having trouble with image loading in NextJS after replacing an old image with a new one?

Multiple file uploads are causing the issue of req.file being undefined

Is there a way to easily transfer your home address to Google Maps without having to manually input

Unable to pass property to child component

Executing the executeScript method in Microsoft Edge using Java and WebDriverWould you like a different version?

Finding it challenging to adapt an AngularJs component-based modal to TypeScript

Is it feasible to utilize VAST for delivering HLS streams? Can m3u8 files be incorporated into VAST tags for delivery?

What could be the reason behind the unexpected behavior of my Bootstrap 3 carousel?

Encountering a Vercel deployment failure due to a TypeError: The 'split' property cannot be read from undefined within several objects