1

I do an api call to get data from The Movie Database.

I then want to display the data using the bootstrap grid system.

This is what it currently looks like using Angular Material Grid:

<mat-grid-list cols="5" rowHeight="2:3" gutterSize="10px">
  <div *ngFor="let movie of movies.results">
    <mat-grid-tile>
        <mat-card>
      <div
        class="thumbnail"
        [style.background-image]="getSafeStyle(movie.poster_path)"
      >
        -- id: {{ movie.id }} -- name: {{ movie.title }}
      </div>
    </mat-card>
    </mat-grid-tile>
  </div>
</mat-grid-list>

enter image description here

the problem starts when I change to mobile view.

Angular material's grid system doesn't resize the elements like Bootstrap would.

I am trying to change it to bootstrap but I do not know how assign column sizes and rows to elements because the results being returned can always change.

So basically what I'm trying to achieve is something like this but inside an ngFor

<div class="row">
  <div class="col-md-4">
    API RESULT
  </div>
  <div class="col-md-4">
    API RESULT
  </div>
  <div class="col-md-4">
      API RESULT
    </div>
</div>

and if there are too many values returned to fit in one row, a whole new row is created with the same amount of columns.

Does anybody know how to achieve this? Thanks in advance for taking the time to read and trying to help :)

Zafiera Davids
  • 221
  • 1
  • 2
  • 13
  • 1
    Just put them all in the same `.row`. The columns will naturally wrap to the next line. – Carol Skelly Apr 07 '19 at 12:32
  • I tried doing it and it wasn't working at first but then I realized the problem was that bootstrap wasn't installed. It's all fixed now though, thanks so much! – Zafiera Davids Apr 07 '19 at 12:49

1 Answers1

4

Something like

<div class="row">
  <div *ngFor="let movie of movies.results" class="col-xl-2 col-lg-3 col-md-4 col-sm-12">
<!-- contents here -->

Bootstrap classes for the columns arbitrary, pick what looks good dependent on the resolution.

mbojko
  • 13,503
  • 1
  • 16
  • 26