1

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.

Onera
  • 687
  • 3
  • 14
  • 34
  • What's the problem? Is there an error? – molamk Feb 22 '19 at 06:45
  • Duplicate of [ngFor with index as value in attribute](https://stackoverflow.com/q/35405618/11065438). Also, just use ngFor on the first internal div and keep classes same. They will end up in a 2 column structure. – Pushkar Adhikari Feb 22 '19 at 06:48

5 Answers5

1

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>
brk
  • 48,835
  • 10
  • 56
  • 78
1

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>
Irshad Ali
  • 1,153
  • 1
  • 13
  • 39
1

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>
Pushkar Adhikari
  • 510
  • 2
  • 9
0

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">
varun agarwal
  • 1,491
  • 6
  • 9
0
<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

vikas
  • 16
  • 1