0

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.

Improve this question
1
  • 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. Commented Jul 7, 2021 at 7:17

3 Answers 3

Reset to default
2

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:

  1. I haven't checked the styling part. But the gist of it is to use the ternary operator.
  2. Ideal solution here would be to write a pipe.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

My suggestion would be

  1. Have a method in your .ts file that checks if the value of the item is the same in the list
  2. Create a new css class that adds the padding
  3. 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;
 }
Improve this answer

1 Comment

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.
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`;
  }
}
Improve this answer

4 Comments

Please see my comment on @IfesinachiBryan's answer.
I heard writing same ternary logic in ts file & returning value, and html binding are same .stackoverflow.com/questions/51674156/…
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?
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.