PENDING_CODE

import { Component } from '@angular/core';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';

export interface Tile {
    color: string;
    cols: number;
    rows: number;
    text: string;
}

/**
* @title Dynamic grid-list
*/
@Component({
    selector: 'grid-list-dynamic-example',
    templateUrl: `
<mat-grid-list cols="4" rowHeight="200px" gutterSize="20px">
    <mat-grid-tile-header>Hola! </mat-grid-tile-header>
    @for (tile of tiles; track tile) {
    <mat-grid-tile [colspan]="tile.cols" [rowspan]="tile.rows">
        <mat-card>
            <mat-card-header>
                <mat-card-title>{{tile.text}} </mat-card-title>
            </mat-card-header>
            <img mat-card-lg-image src="https://image.tmdb.org/t/p/w500/gJtA7hYsBMQ7EM3sPBMUdBfU7a0.jpg" />
            <mat-card-content> </mat-card-content>
        </mat-card>
    </mat-grid-tile>
    }
</mat-grid-list>`,
    imports: [MatGridListModule, MatCardModule],
})
export class GridListDynamicExample {
    tiles: Tile[] = [
        { text: 'One', cols: 1, rows: 1, color: 'lightblue' },
        { text: 'Two', cols: 1, rows: 1, color: 'lightgreen' },
        { text: 'Three', cols: 1, rows: 1, color: 'lightpink' },
        { text: 'Four', cols: 1, rows: 1, color: '#DDBDF1' },
        { text: 'Five', cols: 1, rows: 1, color: 'lightblue' },
        { text: 'Six', cols: 1, rows: 1, color: 'lightgreen' },
        { text: 'Seven', cols: 1, rows: 1, color: 'lightpink' },
        { text: 'Eight', cols: 1, rows: 1, color: '#DDBDF1' },
    ];
}