How to define same css property for multiple classes generated dynamically using ngFor (Angular)?

Question

I am trying to write css for dynamic classes, for that I generated classes using ngFor like below

<div style="max-height: 450px;" *ngFor="let item of data;let i = index" class="card{{i + 1 }}">
.....
</div>

Now I am writing css for above dynamic classes like this ->

@media (min-width: 1399px) {
  .card2,
  .card6 {
   padding-left: 0px;
   padding-right: 0px;
  }
  .card3,
  .card7 {
   padding-right: 0px;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .card2,
  .card4,
  .card6 {
   padding-left: 0px;
 }
}

Now I have less than 8 divs but it can be above 20 and then I will be in trouble.

So Is there any shortest way for defining above css rules like card(n+1){....} ?

ibenjelloun · Accepted Answer · 2019-09-27 11:40:23Z

1

If you are using sass or less, you can use control directives, your sass code would look like :

@for $i from 0 through 20 {
  .card-#{$i} { padding-left: 0px; }
}

Here is a running example.

answered Sep 27, 2019 at 11:40

ibenjelloun

7,7732 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tejas Over a year ago

Thanks you @ibenjelloun !!! Here you give static value 20...instead of that can we give here dynamic value such as length of list etc.....

ibenjelloun Over a year ago

The control directives are executed before runtime, on runtime only css code produced by sass will be executed. I don't think that it is possible to give the length of a javascript array to a sass control directive as an input.

user4676340 · Accepted Answer · 2019-09-27 10:59:03Z

0

Use your current classes as IDs, and use a common class for all.

class="card" id="card-{{ i }}"

answered Sep 27, 2019 at 10:59

user4676340

1 Comment

user4676340 Over a year ago

If you need special styles for given cards, please explain the end goal and provide a minimal reproducible example.

ptheodosiou · Accepted Answer · 2019-09-27 11:14:31Z

0

If I understood your question correctly, you can see my implementation for inserting classes dynamically here.

Basically you need to create a function that returns your class's name.

If what you need is to create specific CSS styles for every n+1 card element then you can try this:

card:nth-child(n+1){
  background-color: red;
}

answered Sep 27, 2019 at 11:14

ptheodosiou

4003 silver badges19 bronze badges

Comments

Stano · Accepted Answer · 2019-09-27 12:22:46Z

0

If there is no pattern and therefore you cannot use sass, then you could look at [ngStyle] directive. Example of using:

<div *ngFor="let item of data;let i = index" class="card-{{i + 1 }}" [ngStyle]="calcStyle(item, i)">
.....
</div>

and return your expected style in your .ts file, like:

calcStyle(item, i){
  if (i==6){
     return {
       'padding-left': '0px;',
       'padding-right': '0px;'
       }
    }
 }

But i think, that you should try to avoid setting padding by index of current item. Instead try to use some grid system.

answered Sep 27, 2019 at 12:22

Stano

864 bronze badges

Comments

Ricardo Ferreira · Accepted Answer · 2019-09-27 12:33:10Z

0

Easy peasy. Just change the value type of your class attribute to accept javascript instead string and add the concatenation.

<div
  style="max-height: 450px;"
  *ngFor="let item of data;let i = index"
  [class]="'card' + (i + 1)">
  .....
</div>

answered Sep 27, 2019 at 12:33

Ricardo Ferreira

6164 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to define same css property for multiple classes generated dynamically using ngFor (Angular)?

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related