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

Try using ::ng-deep . can u provide a demo code so that we can provide u some solution — Shashank Vivek
@ShashankVivek its too complex to provide a demo with angular (or I never found an easy way to do so) sorry.... — DevMoutarde
Oh man I forgot about that (and Im using it lol), sure I can — DevMoutarde

Shashank Vivek Shashank Vivek · Accepted Answer · 2019-04-02T10:31:40

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.

Angular 7 Manually set background color to tile

3 Answers

Update: