Tips on how to increase and update the index value by 2 within an ngFor loop while maintaining a fixed format

Question

Tips on how to increase and update the index value by 2 within an ngFor loop while maintaining a fixed format

I have a specific template layout that displays only two items in each row as shown below. I want to use the ngFor directive to iterate through them:

 <div class="row" *ngFor="let item of cityCodes; let i = index">
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-1">

      </div>
      <div class="img-text">
        {{cityCodes[i].value}}
      </div>
    </div>
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-2">

      </div>
      <div class="img-text">
        {{cityCodes[i+1].value}}
      </div>
    </div>

  </div>

The above code snippet demonstrates my usage of the cityCodes JSON array:

  cityCodes=[{12:'patna'},{23:'jaipur'},{21:'Baliya'},{23:'Canugh'}]

Because I'm following a fixed structure of displaying two columns per row, I am accessing the items using cityCodes[i] and cityCodes[i+1] to display images side by side.

After utilizing the [i+1]th item in the first row, the ngFor directive restarts with the same item in the subsequent row. How can I update the index in this scenario?

javascript arrays angular typescript angular2-template

Answer 1

Answer №1

In my humble opinion, I believe that the following code should suffice.

<div class="row" ; let i = index">
  <div class="col-6" *ngFor="let item of cityCodes" (click)="cityClick(item.key)">
    <div class="img img-1">
    </div>
    <div class="img-text">
      {{item.value}}
    </div>
  </div>
</div>

Alternatively, you can simply enclose it within an ng-template.

<div class="row" ; let i = index">
  <ng-template ngFor let-item [ngForOf]="cityCodes">
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-1">
      </div>
      <div class="img-text">
        {{item.value}}
      </div>
    </div>
  </ng-template>
</div>

Answer 2

In my humble opinion, I believe that the following code should suffice.

<div class="row" ; let i = index">
  <div class="col-6" *ngFor="let item of cityCodes" (click)="cityClick(item.key)">
    <div class="img img-1">
    </div>
    <div class="img-text">
      {{item.value}}
    </div>
  </div>
</div>

Alternatively, you can simply enclose it within an ng-template.

<div class="row" ; let i = index">
  <ng-template ngFor let-item [ngForOf]="cityCodes">
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-1">
      </div>
      <div class="img-text">
        {{item.value}}
      </div>
    </div>
  </ng-template>
</div>

Answer 3

Answer №2

Do you wish to showcase content side by side? This can be achieved using a simple CSS property called columns

To do this, you will need to separate the elements into two arrays: one for items at even indexes in the main array, and another for items at odd indexes.

Afterwards, loop through each of these arrays separately and utilize the CSS property to display them side by side.

.ulClass {
  columns: 2
}

<ul class='ulClass'>

  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>



</ul>

Answer 4

Do you wish to showcase content side by side? This can be achieved using a simple CSS property called columns

To do this, you will need to separate the elements into two arrays: one for items at even indexes in the main array, and another for items at odd indexes.

Afterwards, loop through each of these arrays separately and utilize the CSS property to display them side by side.

.ulClass {
  columns: 2
}

<ul class='ulClass'>

  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>



</ul>

Answer 5

Answer №3

To conditionally execute code, simply wrap it in a div and make use of the isOdd method that you can create in your TypeScript file.

<div class="row" *ngFor="let item of cityCodes; let i = index">
   <div *ngIf="isOdd(i)">
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-1">

      </div>
      <div class="img-text">
        {{cityCodes[i].value}}
      </div>
    </div>
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-2">

      </div>
      <div class="img-text">
        {{cityCodes[i+1].value}}
      </div>
    </div>
  </div>
  </div>

Answer 6

To conditionally execute code, simply wrap it in a div and make use of the isOdd method that you can create in your TypeScript file.

<div class="row" *ngFor="let item of cityCodes; let i = index">
   <div *ngIf="isOdd(i)">
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-1">

      </div>
      <div class="img-text">
        {{cityCodes[i].value}}
      </div>
    </div>
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-2">

      </div>
      <div class="img-text">
        {{cityCodes[i+1].value}}
      </div>
    </div>
  </div>
  </div>

Answer 7

Answer №4

It may seem a bit like a hack, but you have the option to avoid it if the condition i % 2 === 1 is met.

<div class="row" *ngFor="let item of cityCodes; let i = index" *ngIf="i % 2 === 0">

Answer 8

It may seem a bit like a hack, but you have the option to avoid it if the condition i % 2 === 1 is met.

<div class="row" *ngFor="let item of cityCodes; let i = index" *ngIf="i % 2 === 0">

Answer 9

Answer №5

<section class="city-section" *ngFor="let item of cityCodes; index as i; first as isFirst; even as isEven">
  <ng-container *ngIf="isEven || isFirst">
    <div class="city-column col-6" (click)="cityClick(item.key)">
      <div class="city-info border border-primary"></div>
      <div class="index-info border border-primary">{{i}}</div>
    </div>
    <div class="city-column col-6" (click)="cityClick(item.key)">
      <div class="city-info border border-primary"></div>
      <div class="index-info border border-primary">{{i+1}}</div>
    </div>
  </ng-container>
</section>

Check out the code on stackblitz here

Answer 10

<section class="city-section" *ngFor="let item of cityCodes; index as i; first as isFirst; even as isEven">
  <ng-container *ngIf="isEven || isFirst">
    <div class="city-column col-6" (click)="cityClick(item.key)">
      <div class="city-info border border-primary"></div>
      <div class="index-info border border-primary">{{i}}</div>
    </div>
    <div class="city-column col-6" (click)="cityClick(item.key)">
      <div class="city-info border border-primary"></div>
      <div class="index-info border border-primary">{{i+1}}</div>
    </div>
  </ng-container>
</section>

Check out the code on stackblitz here

Tips on how to increase and update the index value by 2 within an ngFor loop while maintaining a fixed format

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Exploring the handling of the nth element within a jQuery each loop

Techniques for adding values to arrays in JavaScript

Utilizing jQuery with variable assignment: A beginner's guide

An error occured upon loading FullCalendar: Uncaught TypeError - Unable to read property 'push' as it is undefined

Ajax handling all tasks except for adding HTML elements

Different ways to analyze elements from 2 arrays to hone in on specific values

Utilize string variables within TypeScript's enumeration feature

I keep encountering the ExpressionChangedAfterItHasBeenCheckedError error in Angular, even though I'm calling it before the view is checked. What could

javascript send variable as a style parameter

Connection lost from JS client in Twilio's Programmable Chat

Explore the latest update in the AngularJS single page application that introduces a new feature specifically designed for the initial login

Content sliding to the left due to modal prompt

ESLint is notifying that the prop validation for ".map" is missing, with the error message "eslint react/prop-types" occurring in a Typescript React environment

The error message "Unable to access 'useContext' property of null" appeared

Guide on implementing two submission options in an HTML form using JavaScript

Exploring the similarities between using jQuery AJAX post and Angular

Exploring the potential of Oracle Openscript in combination with Javascript using AngularJS,

CSS styles are combined and included at the beginning of the index.html file

Implementing dynamic component swapping in Vue 3 using components from another component

Could converting a 47-byte JSON string into 340 MB be possible through JSON stringification?