CODEWITHSUNDEEP
ionic4
Juny
Juny

Reputation: 299

How to create horizontal scroll with cards using *ngFor?

I'm using Ionic 4 and I'm trying to create a horizontal scroll that each item will be a card. And those cards will be displayed dynamically (with *ngFor).

I already tried something like this:

   <div class="container">
      <div class="scroll" scrollX="true">
        <ion-card *ngFor="let item of items">
           ... 
        </ion-card>
      </div>
   </div>

That I searched before, but doesn't work.

What I'm expecting is something like this:



   <ion-row>
      <ion-item>
         <ion-scroll scrollX=true"
            <ion-card *ngFor="let card of cards>
               <ion-card-header>
                  <ion-img src="..."/>
               </ion-card-header>
               <ion-card-content>
                  <p>...</p>
               </ion-card-content>
            </ion-card>
         </ion-scroll>
      </ion-item>
    <ion-row>

So basically, slider of cards with *ngFor to get data from the DB. I saw that in ionic 4, ion-scroll doesn't exist anymore.

Upvotes: 0

Views: 1546

Answers (2)

Juny
Juny

Reputation: 299

Thanks for the support guys. I found a solution.

.thumnails{
  overflow-x: scroll;
  overflow-y: hidden;
  .list-thumbnail{
    height: 100%;
    white-space: nowrap;
      .img-thumb{
        display: inline-block;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 3px;
        width: 50px;
        height: 50px;
        margin:0 2px 0 0; 
        line-height: 60px;
     }
  }
}
::-webkit-scrollbar { 
  display: none; 
}

<div class="thumnails">
   <div class="list-thumbnail">
     <div class="img-thumb" [class.selected-img]="filter.selected" *ngFor="let filter of filters">
        <ion-card class="card card__full">
            <ion-card-header no-padding>
              <ion-img [src]="filter.url" style="width: 100%;" </ion-img>
                  </ion-card-header>

               <ion-card-content>
                  <p text-center>{{filter.name}}</p>
               </ion-card-content>
          </ion-card>
      </div>
   </div>
 </div>

Upvotes: 1

Hardik
Hardik

Reputation: 3258

.ts file

slides: any[];
  constructor(public navCtrl: NavController) {
      this.slides = [{
      title: 'Slide 1',
      content: 'Slide 1 content'
    },{
      title: 'Slide 2',
      content: 'Slide 2 content'
    },{
      title: 'Slide 3',
      content: 'Slide 3 content'
    },{
      title: 'Slide 4',
      content: 'Slide 4 content'
    }]
  }

your-file.html

<ion-content padding>
  <ion-slides pager="true">
      <ion-slide *ngFor="let slide of slides">
        <h1>{{ slide.title}}</h1>
        <div style="display:block">
          {{ slide.content }}
        </div>
      </ion-slide>
    </ion-slides>
</ion-content>

try this solution hope it'll resolve your problem. please have a look on this working url

Upvotes: 0

Related Questions