CODEWITHSUNDEEP
htmlcssangularcomponents
Bartłomiej Stasiak
Bartłomiej Stasiak

Reputation: 518

How to use "repeat()" css function combined with Angular ngStyle directive?

Let's assume that you have div in some component's html template:

<div [ngStyle]="{'grid-template-columns': repeat(5, 20%)}"></div>

How to make repeat() css function work in that scenario?

Upvotes: 1

Views: 445

Answers (3)

Mrvonwyl
Mrvonwyl

Reputation: 347

Consider using [style.<property>]="'<value>'" in order to have better control over which styles are applied.

<div
  class="meal-list"
  [style.grid-template-rows]="'auto repeat(' + store.mealsToShow() + ', 1fr)'"
  [style.grid-template-columns]="'repeat(' + store.mealsToShow() + ', 1fr)'"
>

Angular reference: https://angular.dev/guide/templates/binding#css-style-properties

Upvotes: 0

Jason Spence
Jason Spence

Reputation: 564

I just came across this question and thought I'd share how I used it in my code.

<div [ngStyle]="{'grid-template-columns': 'repeat(' + buttonData.length + ', 1fr)'}"></div>

Upvotes: 0

Saghi Shiri
Saghi Shiri

Reputation: 617

You just need to put the right side in quotations:

<div [ngStyle]="{'grid-template-columns': 'repeat(5, 20%)'}"></div>

Upvotes: 1

Related Questions