Angular7 Material7 Grid List item order/flow not changing with flex-layout?

Question

I have a material7 grid list component in my html and I just can't seem to manage to change the flow of it. I have items that are numbered showing in 2 columns and it just looks weird for them to flow as a row vs column.

At first I had some issues where all the tiles were dissappearing but now after upgrading everything to Material 7 it just looks exactly the same.

Markup:

 <div id="lvl1row">
          <mat-grid-list  rowHeight="45"  #grid  gutterSize="0px">
        <div class="list-group" *ngFor="let button of lvl1">
            <mat-grid-tile  [fxFlexOrder]="itemOrder(theItemOrder)">
          <!-- LVL 1 Buttons  -->
          <button id="lvl1buttons" class="item"  mat-raised-button color="accent" (click)="reveallvl2(button['md:0/413349530_Level 0 – Section'], button['md:0/413349601_Level 1 – Series Header'])">
            <fa-icon icon="folder"></fa-icon> {{ button['md:0/413349601_Level 1 – Series Header'] | lvl1clean }}
          </button>
        </mat-grid-tile>
        </div>
      </mat-grid-list>
      </div>

I've also tried to make this function to sort-of change the order of every other item like this:

  theItemOrder = 0

  itemOrder(param) {
    this.theItemOrder++
    if((param%2) == 0){  console.log(this.theItemOrder); return this.theItemOrder + 1} else {  console.log(this.theItemOrder); return this.theItemOrder}
  }

It kinda-works but also makes Angular's change-detection lifecycle fire up a metric-tonne of errors.

Answer 1

I've looked for something to dynamically re-order grid-list-items but I think your best bet is to recreate their functionality with your own div class, then use flexLayout and fxFlexOrder on the div containers to change their positioning with the use of media sizes or whatever your determining factor is.

Here is some examples of fxFlexOrder: https://tburleson-layouts-demos.firebaseapp.com/#/responsive https://github.com/angular/flex-layout/wiki/fxFlexOrder-API

and here are some good examples of how to implement dynamic sizing/applicaiton of the ordering: https://stackblitz.com/edit/angular-responsive-material-grid-leocaseiro