Angular 7 Manually set background color to tile

mat-grid
mat-grid-tile-header example
angular material two column layout
angular tile view
mat grid tile selected
mat-grid-tile scroll content
mat-grid-list example
angular image grid

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 "'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.

html, Angular 7 Manually set background color to tile. Here is my code : 1. Angular Material theme definition file. The numbers behind the palette variable name select particular shades of chosen color for default, lighter and darker variants.If no numbers are provided

You can just use style.backgroundColor:

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

Example

Angular 7手动将背景颜色设置为tile Angular 7 Manually set , Angular 7手动将背景颜色设置为tile. Angular 7 Manually set background color to tile <mat-grid-list cols="4" rowHeight="100px"> <mat-grid-tile colspan="2"� Angular applications are styled with standard CSS. That means you can apply everything you know about CSS stylesheets, selectors, rules, and media queries directly to Angular applications. Additionally, Angular can bundle component styles with components, enabling a more modular design than regular stylesheets.

This will work

 <mat-grid-tile [colspan]="3" [rowspan]="1" style="background-color: lightblue">

Angular Grid Pagination | Template, Angular pagination in the Grid is configurable via the paging and perPage inputs. Paging can also be done programmatically through the Grid API, using the Where page allows you to set the current page, perPage - the number of items that are In this example we only changed the icon color and background and the� Angular Bootstrap Background Image Angular Background Image - Bootstrap 4 & Material Design. Angular Bootstrap background image is an illustration chosen by a user placed behind all other objects on the website. It may be full or partially visible.

Image Transformations for Developers, You can also specify where the original image is placed by using the gravity parameter (set to center by default), and specify the color of the background in the� In our example above we can set the body background and text colors to our defined custom properties. Next, we will look at our app-card component and how it uses our CSS variables. Component CSS. Our first Angular component, the card component is relatively simple using ng-content to allow use to pass HTML content into the inner template.

Image Transformation API Reference, Programmatically transform images with one line of code: crop, resize, add borders and background, face detection, rich image effects, and more. URL RubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular. libraries, you can set the border values programmatically (e.g., :border => { :width => 4, :color => ' black' }). Hi Guys, Angular 2/4 version. I have a getbootstrap panel-heading with a title and my object is to change the background color of the panel heading based on the color code that comes with the record.

Bottomnavigationview change icon color programmatically, You can also pick a new color by tapping the + color tile. Apr 27, 2020 � Angular material; How to change mat-menu background color programmatically? Repeat steps 6 and 7 to programmatically control additional font characteristics for� It’s easy to bind inline style in your Angular 2 templates. Here’s how you would bind a single style value for example: <p [style.background-color]="'darkorchid'"> Quite something! </p> You can also specify the unit, here for example we set the unit in em, but px, % or rem could also be used:

Comments
  • Try using ::ng-deep . can u provide a demo code so that we can provide u some solution
  • @ShashankVivek its too complex to provide a demo with angular (or I never found an easy way to do so) sorry....
  • Can u modify stackblitz.com/angular/… and show us ?
  • Oh man I forgot about that (and Im using it lol), sure I can
  • How do I save the damn thing ?? @ShashankVivek
  • Wow this is actually working !! I hate the angular doc sometimes... how did you find out ? thank you anyway :)
  • well, I still can't find that anywhere in the material doc (neither in the angular website nor in the doc within my IDE, like in the grid-tile.d.ts file), could you give me a source of that ? for my information :D
  • @DevMoutarde added explanation in my provided answer
  • Thank you but its not working, I already tried that. Also my IDE is telling me I cannot use that property here anyway so I guess its right...
  • in app component css file : mat-grid-tile { background-color: yellow; }
  • thanks but how can I select a specific tile to color ? right now every tile is getting yellow colored lol
  • @DevMoutarde apparently it really needs to be bound using brackets. Check my update. Also check the stackblitz I attached for a working example