CODEWITHSUNDEEP
javascriptarraysangulartypescriptangular2-template
Onera
Onera

Reputation: 717

How to increment and update index value by 2 in ngFor while using a fixed structure

I have a fixed template structure to print only two items in a row as below and i need to iterate using ngFor directive:

 <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>

As you can see in the above code I am using cityCodes json as below:

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

Since I have a fixed structure like two columns in a row, i am using cityCodes[i] and cityCodes[i+1] to print the images side by side.

As I have already used [i+1]th item in the first row, ngFor is again starting with same item in the next row. How to update the index here.

Upvotes: 1

Views: 9490

Answers (5)

vikas
vikas

Reputation: 16

<div class="row" *ngFor="let item of cityCodes; index as i; first as isFirst; even as isEven">
<ng-container *ngIf="isEven || isFirst">
  <div class="col-6 " (click)="cityClick(item.key)">
  <div class="border border-primary">

  </div>
  <div class="border border-primary">
    {{i}}
  </div>
</div>
<div class="col-6" (click)="cityClick(item.key)" >
  <div class="border border-primary">

  </div>
  <div class="border border-primary">
    {{i+1}}
  </div>
</div>
</ng-container>

Refer stackblitz code here

Upvotes: 0

Pushkar Adhikari
Pushkar Adhikari

Reputation: 510

IMHO, contrary to other answers here, I think following should be enough.

<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>

or to just wrap in 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>

Upvotes: 1

Irshad Ali
Irshad Ali

Reputation: 1213

Just wrap your code with a div and do things conditionally like below. You may want to create isOdd method in your ts 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>

Upvotes: 1

varun agarwal
varun agarwal

Reputation: 1509

Kinda hack-y but you could skip it if the i % 2 === 1

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

Upvotes: 0

brk
brk

Reputation: 50291

It seems you want to display side by side. You can do it usinf simple css property columns

You will basically need two array , one will contain all the elements occupying even index in main array and another all the elements which are occupying odd index.

Then loop over each of them separately and use css property to display 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>

Upvotes: 1

Related Questions