Displaying multiple items horizontally using ngFor

Question

Displaying multiple items horizontally using ngFor

I am having trouble organizing my data using the *ngFor loop. I would like to have three items displayed per row when using ngFor. I attempted to use indexing, but it only resulted in one item per row.

<div class="container">
  <div class="row">
    <div class="mb-3 card-deck text-center">
      <div class="card mb-4 box-shadow" *ngFor="let product of item.product;">
        <div class="card-header">
            <h4 class="my-0 font-weight-normal">{{ product.name }}</h4>
        </div>
        <div class="card-body">
                <img src="{{ product.imagePath}}" class="img-thumbnail" alt="{{ product.name }}"> 
                <p class="lead">{{ product.msg }} {{ product.msg2 }}</p>
                <a role="button" class="btn btn-lg btn-block btn-primary" routerLink="product-details">More...</a>
        </div>
      </div>
    </div>
  </div>
</div>

Any assistance provided would be greatly appreciated. Currently, my stack includes:

Angular-cli version 6.1.0
bootstrap 4

angular typescript ngfor

Answer 1

Answer №1

To efficiently handle the logic on the index, you can utilize the following code snippet:

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 3 === 0" class="row">
    {{ item }}
    <div *ngIf="i + 1 < items.length">{{ items[i + 1] }}</div>
    <div *ngIf="i + 2 < items.length">{{ items[i + 2] }}</div>
  </div>
</div>

Answer 2

To efficiently handle the logic on the index, you can utilize the following code snippet:

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 3 === 0" class="row">
    {{ item }}
    <div *ngIf="i + 1 < items.length">{{ items[i + 1] }}</div>
    <div *ngIf="i + 2 < items.length">{{ items[i + 2] }}</div>
  </div>
</div>

Answer 3

Answer №2

To showcase 3 items in a row, you can leverage the power of bootstrap css classes.

Ensure your HTML file has a structure similar to this:

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

Answer 4

To showcase 3 items in a row, you can leverage the power of bootstrap css classes.

Ensure your HTML file has a structure similar to this:

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

Displaying multiple items horizontally using ngFor

Answer №1

Answer №2

Similar questions

Is Clarity Design compatible with Angular 15?

Comparing Angular global variables: when to use static readonly in service class versus const

Encountering an Issue with Passing Props through Gatsby Link to Access a Prop on the

Managing user sessions in Angular 5: Best practices and tips

What is the best way to parse JSON data with Typescript?

There seems to be no clear reason as to why the Angular Service is showing

Utilizing Glassfish Application Server and MSSQL Database for Angular Front-End Authentication in Jakarta

Understanding vulnerabilities in Angular and implementing effective solutions to address them

Guide to updating the content of an input field

"Encountering a duplicate identifier export error when attempting to launch my Angular2 project using

Switch back emulation when moving away from page - using angular javascript

Why am I receiving a 301 status code for my API calls while using the Angular development server?

Disabling behavior subjects in Angular 8: A guide to unsubscribing

I am encountering issues with the TypeScript repository build on my local machine, but it successfully passes when

Should the input field only contain spaces, a validation error will be triggered by the user

Introducing NextAuth: Empowering multiple users to access a single account

Ways to access the types of function parameters

What is the proper way to add an SSL cert to an Angular HTTP API request?

Creating an Angular interface that includes static values

Navigating with firebase authentication and angular routing