2

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.

SebastianG
  • 8,563
  • 8
  • 47
  • 111
  • MatGridList is layed out according to its `cols` value and the MatGridTiles' `colspan` and `rowspan` values. It does not use flex-layout. Your code creates multiple DIVs inside the grid, with a single grid tile in each DIV. It doesn't matter what order you specify for the tiles because there is only one tile in its parent flex-layout container. The approach you should try is to manipulate the array order of the tile 'button' objects, not try to force the grid into a different layout. – G. Tranter Nov 06 '18 at 22:33
  • @G.Tranter thanks -- I have been trying this above but unsuccessful so far. I've played with it a little bit more but now I just feel out of luck again, no success in modifying that in any meaningful efficient way. – SebastianG Nov 09 '18 at 14:31
  • if possible, please create a small demo over stackblitz – Abhishek Kumar Nov 15 '18 at 08:19

1 Answers1

0

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

Andres
  • 106
  • 4