Dynamic css in angular with condition?

Question

I have this loop:

<tr *ngFor="let item of selectedItems; let i = index"  >
                <td [style.padding-left.px]="[ 5 * (i+1)]">{{item.num}}</td>
 </tr>

What i want to achive is to add this padding on every item but only if in every item i have same property with same value. For example if i have for all items property main that have same value i will add padding if not padding will be always fixed to 5px. Any suggestion? I manage to add padding like this but without any condition.

handle the data manipulation in the TS file? loop through all objects in your array and check whatever you like. Then set a property like paddingLeft on the data. in the template you just apply the paddingLeft property as your padding-left value. — cloned, Jul 07 '21 at 07:17

score 2 · Accepted Answer · answered Jul 07 '21 at 07:19

If the condition needs to satisfy all the objects in the array, I'd say it's better to introduce an additional variable that holds the condition as a boolean. You could use Array#every to check the condition.

Controller (*.ts)

export public SomeComponent implements OnInit {
  allMain: boolean = false;  // <-- boolean to hold condition

  ngOnInit() {
    // initialize `selectedItems`
    this.allMain = this.selectedItems.every(item => item['main'] === 'someValue');
  }
}

Use ternary operator in the template to apply the condition.

Template (*.html)

<tr *ngFor="let item of selectedItems; let i = index">
  <td [style.padding-left.px]="allMain ? [5 * (i+1)] : 5">{{item.num}}</td>
</tr>

Note:

I haven't checked the styling part. But the gist of it is to use the ternary operator.
Ideal solution here would be to write a pipe.

score 0 · Answer 2 · answered Jul 07 '21 at 07:17

My suggestion would be

Have a method in your .ts file that checks if the value of the item is the same in the list
Create a new css class that adds the padding
Use ngClass to add the css class if the condition of the method is true.

Eg. .html

 <tr *ngFor="let item of selectedItems; let i = index"  >
                    <td [ngClass]="isDuplicate(item) ? 'p-5' :''">
                     {{item.num}}</td>
     </tr>

.css

    .p-5{
         padding-left: 5px;
        }

.ts

   isDuplicate(item): boolean {
   return this.selectedItems.filter(x => x.num === item.num).length > 1;
 }

Binding a function to a directive with default change detection strategy would trigger the function for each change detection cycle. Plug in a `console.log` in the function to check the frequency of triggers. It could lead to potential performance issues. — ruth, Jul 07 '21 at 07:21

score 0 · Answer 3 · answered Jul 07 '21 at 07:24

0

Handle logic in ts file and return padding values only

HTML

<tr *ngFor="let item of selectedItems; let i = index"  >
                <td [style.padding-left]="setpadding(item,i)">{{item.num}}</td>
</tr>

TS:-

setpadding(item:any,index:nuber):string{
   if(your condition){
     //your condition

     return `10px`;   //your padding based on condition
   }
  else{
    //default
   return `5px`;
  }
}

answered Jul 07 '21 at 07:24

Parameshwar Rao

47
5

Please see my comment on @IfesinachiBryan's answer. – ruth Jul 07 '21 at 07:26
I heard writing same ternary logic in ts file & returning value, and html binding are same .https://stackoverflow.com/questions/51674156/angular-ngif-binding-to-function – Parameshwar Rao Jul 07 '21 at 07:45
The answer speaks about getting a single variable from the controller using a getter. It's not the same as running a condition (in your ansswer: `if (your condition)`) for each CD cycle. What do you think the `your condition` could look like in your answer? – ruth Jul 07 '21 at 07:48
it adds more customization being able to access individual array object and compare keys or add any business logic then render as needed. that's all. Though for simple thing as style.padding-left I think your answer checks out. – Parameshwar Rao Jul 07 '21 at 08:09

Dynamic css in angular with condition?

3 Answers3