Angular - Ngfor* Four Elements on Row

ngFor items per row

You can use bootstrap css classes to display 3 items per row

Make similar structure to your html file

<div class="row">
 <div class="col-4 col-sm-4 col-md-4 col-lg-4" *ngFor="let product of item.products">
  {{product.name}} | {{product.imagePath}} | {{product.msg2}} <!-- display product data -->
 </div>
</div>

How to display 4 values in every row in html using ngfor and ngif?

    <table>
    <tr><td *ngFor="let table of uiFields | keyvalue"><label>{{table.key}}</label><label>{{table.value}}</table></td>
    </tr>
    </table>

How to iterate two elements in a row with ngFor?

You can skip every other index just by looking for even numbers (0, the first index is even) for *ngIf, and display that items with the next soon be skipped (odd) item:

<div class='row wow fadeInUp' *ngFor='let index of myArray; let i = index; let even = even'>
      <span *ngIf="even">
         <div class='col-md-6' >
             <md-card>
                <md-card-header>
                   <md-card-title>
                     {{myArray[i]}}
                   </md-card-title>
                 </md-card-header>
              </md-card>
         </div>
         <div class='col-md-6'>
             <md-card>
                <md-card-header>
                   <md-card-title>
                     {{myArray[i+1]}}
                   </md-card-title>
                 </md-card-header>
              </md-card>
        </div>
       </span>
    </div>

DEMO EXAMPLE

Angular io (4) *ngFor first and last

Inside the ngFor you have access to several variables:

• index: number: The index of the current item in the iterable.
• first: boolean: True when the item is the first item in the iterable.
• last: boolean: True when the item is the last item in the iterable.
• even: boolean: True when the item has an even index in the iterable.
• odd: boolean: True when the item has an odd index in the iterable.

So:

<md-expansion-panel *ngFor="let item of items; first as isFirst"
    *ngClass="{ 'first' : isFirst }">
  <content></content>
</md-expansion-panel>

Documentation at https://angular.io/api/common/NgForOf gives this example:

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

Angular Flex-layout with ngFor, X elements per row

Your code (derived from the other SO question) is not working because fxLayoutWrap is deprecated according to the changelog of Angular Flex-layout. Instead, you should set it directly to the fxLayout attribute to take effect:

fxLayout="row wrap" fxLayout.xs="column wrap"

is the outcome. I also add a percentage sign to the regularDistribution variable: 100 / 3 + '%'.

<div fxLayout="row wrap" fxLayout.xs="column wrap">
  <div fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let room of listRooms;" class="room">
      Room {{room|json}}
  </div>
</div>

Here's an updated StackBlitz that solves your issue. If the viewport is larger than fxFlex.gt-md, it will show three items per row.

How can I limit ngFor repeat to some number of items in Angular?

This seems simpler to me

<li *ngFor="let item of list | slice:0:10; let i=index" class="dropdown-item" (click)="onClick(item)">{{item.text}}</li>

Closer to your approach

<ng-container *ngFor="let item of list; i as index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-container>

alternative

<ng-template ngFor let-item [ngForOf]="list" let-i="index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-template>

---

Related Topics