Topic: Grid System inside of a looping Angular 2+

SMoto R (SuperMotoRiders) free asked 6 years ago

Hello there, I have an issue with the gridSys when i make the loop, he display play me vertical item instead of horizontal item list. <section class="section pb-3"> <divclass="row" *ngFor="let item of pizza"> <divclass="col-lg-4 col-md-6 mb-r"> <divclass="card card-cascade wider"> <divclass="view overlay hm-white-slight" *ngFor="let img of item.images"> <img [src]="img.imgP"class="img-fluid"alt=""> <a> <divclass="mask waves-effect waves-light"mdbRippleRadius></div> </a> </div> <divclass="card-body text-center no-padding"> <h4class="card-title"><strong><ahref="">{{}}</a></strong></h4> <pclass="card-text">{{item.description}}</p> <divclass="card-footer"> <spanclass="left">39$</span> </div> </div> </div> </div> </div> </section> thanks, sorry for my english.

Damian Gemza staff answered 6 years ago

Hello, I've changed your's code little bit. Now it works perfectly.  Please read carefully my code so that next time you will know how to implement that layout.
<div class="row">

<div *ngFor="let item of pizza" class="col-lg-4 col-md-6 card">

<div class="card card-cascade wider" *ngFor="let img of item.images">

<div class="view overlay hm-white-slight">

<img [src]="img.imgP" class="img-fluid" alt="">


<div class="mask waves-effect waves-light "mdbRippleRadius></div>



<div class="card-body text-center no-padding">

<h4 class="card-title">


<a href="">{{}}</a>



<p class="card-text">{{item.description}}</p>

<div class="card-footer">

<span class="left">39$</span>





Best Regards, Damian

SMoto R (SuperMotoRiders) free commented 6 years ago

Thanks a lot Damian. Works!!!

Damian Gemza staff answered 6 years ago

Hello, Could you send me your's project @ ? I cannot reproduce your's error. Best Regards, Damian

SMoto R (SuperMotoRiders) free commented 6 years ago

This is a small example and don't works, again list view is vertical: <div> <div><div class="block" *ngFor="let item of pizza"></div> <div><div *ngFor="let img of item.images"></div> <div><divclass="col-lg-4 col-md-6"></div> <div><ulclass="list"></div> <div><li></div> <div><imgstyle="max-width: 100%" [src]="img.imgP"alt=""></div> <div></li></div> <div><li>{{}}</li></div> <div></ul></div> <div></div></div> <div><div></div> <div><div></div> </div> copy paste list of cards then make a loop inside angular and you will see dosen't work.....

SMoto R (SuperMotoRiders) free commented 6 years ago

Here is my project, Thanks.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No