Grid System inside of a looping Angular 2+

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="">{{item.name}}</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.

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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

<a>

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

</a>

</div>

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

<h4 class="card-title">

<strong>

<a href="">{{item.name}}</a>

</strong>

</h4>

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

<div class="card-footer">

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

</div>

</div>

</div>

</div>

</div>

Best Regards, Damian

SMoto R (SuperMotoRiders) free commented 6 years ago

Thanks a lot Damian. Works!!!

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hello, Could you send me your's project @ d.gemza@mdbootstrap.com ? 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>{{item.name}}</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. https://we.tl/2u69ACzSZ4

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

SMoto R (SuperMotoRiders)

0Support score
2Questions 0Answers 0Snippets