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

Solution

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>

Comments

[ian dsouza]

Can you please check the question again I have updated an Image. Is that achievable from your answer? Thank you.

[ian dsouza]

Actually I wanted to change the cols value for every mat-grid-tile, That way I could set [colspan] value and then get the required output. but the Issue is I cannot change the value of each mat-grid-tile. I can only set the "cols" value once

[Prachi]

Then I recommend using table structure with given columns. And dynamically assigning colspan and rowspan values to it. Try creating it statically by using basic html, then converting it into dynamic angular code.

[Sherwin Ablaña Dapito]

How can we change the content dynamically? let's say I want to add a sub component to content, is it possible?

[L. Guthardt]

@SherwinAblañaDapito Sure that is the concept of Angular. Just create any sub component and insert it's selector as the content of a mat-grid-tile.