Dynamically change column values in angular material mat-grid-list

Question

I am using mat-grid-list :https://material.angular.io/components/grid-list/examples

So in the documentation it is given (you can refer the link below) :

Adding tiles that span multiple rows or columns It is possible to set the rowspan and colspan of each mat-grid-tile individually, using the rowspan and colspan properties. If not set, they both default to 1. The colspan must not exceed the number of cols in the mat-grid-list. There is no such restriction on the rowspan however, more rows will simply be added for it the tile to fill.

But my Issue is that I want a structure like this :

there will be three rows and in the first row 3 columns, 2nd Row 4 columns and 3rd row 2 columns. Like a collage frame. the number of columns per row will be send dynamically.

Is there any solution or an alternative way of achieving this? refer this Image : https://i.stack.imgur.com/AhsrY.png

Answer 1

Yes you can change the columns and rows dynamic for every tile.

<mat-grid-list cols="{{desired_columns}}" rowHeight="{{desired_rowHeight}}">
    <mat-grid-tile
        *ngFor="let tile of tiles"
        [colspan]="tile.cols"
        [rowspan]="tile.rows"
        [style.background]="tile.color">
       {{tile.text}}
    </mat-grid-tile>
</mat-grid-list>

That's one way by using a list e.g. tiles that you have in your typescript class and set the values dynamic.

---

Or you can create your mat-grid-tiles manual in html, but still set different column and row spans for each tile.

<mat-grid-tile [colspan]=1 [rowspan]=2>
    content
</mat-grid-tile>
<mat-grid-tile [colspan]=4 [rowspan]=1>
    content
</mat-grid-tile>
<mat-grid-tile [colspan]=3 [rowspan]=2>
    content
</mat-grid-tile>

Answer 2

You can try this: angular2 table with dynamic rows and columns or by using multiple mat-grid-list by providing different row height ratios and columns for different rows :

<mat-grid-list cols="{{your_desired_columns}}" rowHeight="{{your_dynamic_ratio}]">
    <mat-grid-tile>1</mat-grid-tile>
    <mat-grid-tile>2</mat-grid-tile>
    <mat-grid-tile>3</mat-grid-tile>
   ..
    <mat-grid-tile>n</mat-grid-tile>
</mat-grid-list>