angular: style.grid-template-columns inline binding doesn't work

🐞 bug report

Description

style.grid-template-columns inline binding doesn’t work

<div class="grid" [style.grid-template-columns]="'repeat(5,  1fr)'">
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
</div>

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-hbqtjz

🌍 Your Environment

Angular Version:

7.1.4

Anything else relevant?

It works by using ngStyle like [ngStyle]="{ 'grid-template-columns': 'repeat(5, 1fr)'}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 16 (5 by maintainers)

Most upvoted comments

@matteobortolazzo In Angular v9 they have at least fixed binding custom properties, so although the sanitizer is still broken w.r.t grid functions, you may be able to move the repeat definition into your component’s stylesheet, and supply just the variable using a style binding, as follows:

.container {
  grid-template columns: repeat(auto-fill, minmax(var(--itemMinWidth), 1fr));
}

<div class="container" [style.--itemMinWidth]="itemMinWidth">
   ...
</div>

+10

jonrimmer on May 28, 2020

🎉 Acceptable Workaround 🎉

I’ve got rid of this problem in Angular 8 by injecting DOCUMENT token and set manually my style property. (should still be OK for Angular 9 & 10)

Document injection:

Style property assignment:

Use your style property inside your attached css file:

Jakartoine on Jul 29, 2020