Angular 7 Manually set background color to tile

Question

Here is my code :

<mat-grid-list cols="4" rowHeight="100px">
    <mat-grid-tile colspan="2" rowspan="2">
        1
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="2">
        2
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
        3
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
        4
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="1">
        5
    </mat-grid-tile>
</mat-grid-list>

I want to manually apply a background color to these tiles. I know that I can use this method : _setStyle(property: string, value: any): void;

But I have no idea how in my case, since I didn't initialize any MatGridTile object in my component. I don't want to use a dynamically filled grid.

https://stackblitz.com/edit/angular-adjmya?file=app/grid-list-dynamic-example.html

Answer 1

Try "'red'" in [style.background]

<mat-grid-list cols="4" rowHeight="100px">
    <mat-grid-tile colspan="2" rowspan="2" [style.background]="'red'">
        1
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="2">
        2
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
        3
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
        4
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="1">
        5
    </mat-grid-tile>
</mat-grid-list>

Demo code here

Update:

The reason it required ' single quotes is because as per the demo, we can see that it expects

[style.background]="tile.color"

which shows that it takes angular variable and interpolate it. By providing ' , you tell material component that its a string and not some angular variable defined in the component. Otherwise, with style.backgroundColor="red" , it looks for a variable named red in the component.

Answer 2

You can just use style.backgroundColor:

<mat-grid-tile colspan="2" rowspan="2" [style.backgroundColor]="'red'">

Example