Angular - Conditional Formatting in for loop

Question

I have a for loop that print the content of an array. I would like one line to be highlighted.

The array is stored in my component.ts, as well as the line to highlight (but to simplify i'll fix it at 1)

I know this works:

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<body ng-app="">

<div ng-style="{color: (1==1)?'aqua':'black'}">Sample Text</div>

</body>

And this print my array content in black properly

<div *ngFor="let i of this.getCode()">  {{i}} <br></div>

But when i try to have both it throws at runtime : Cannot find a differ supporting object

<div *ngFor="let i of this.getCode()" ngStyle="{color: (i==1) ? 'aqua' : 'black'}">  {{i}} <br></div>

I think this error is thrown, when your data, here this.getCode(), does not is an array. Please try to log it to the console and prove that it is an array. — Florian N.
– Florian N., Commented May 13, 2021 at 11:18
if you are calling any method in your html then no need to write this you can direclty call getCode() and getLineSelected() — Kiran Mistry
– Kiran Mistry, Commented May 13, 2021 at 11:19
It's a simple getter from a variable. i replaced it with 1 with the same result. — Foxhunt
– Foxhunt, Commented May 13, 2021 at 11:28
Angularjs != Angular, which are you using and update the tag if needed — Eyeslandic
– Eyeslandic, Commented May 13, 2021 at 11:31

halfer · Accepted Answer · 2022-01-20 23:12:22Z

1

First in your HTML, remove this. in HTML there is no need to write that.

For example:

HTML

<div *ngFor="let i of getCode()" [ngStyle]="{'color': i==getLineSelected() ? 'aqua' : 'black' }">
  {{i}}
  <br>
</div>

TS

 getCode() {
   return [1, 2, 3, 4, 5];
 }

 getLineSelected() {
   return 1;
 }

You can play with my code here.

edited Jan 20, 2022 at 23:12

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered May 13, 2021 at 11:33

Kiran Mistry

2,7253 gold badges14 silver badges29 bronze badges

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

1 Comment

Foxhunt Over a year ago

Thanks it works. So the missing [ ] around the ngStyle was the error. What is the meaning of these [ ] ?

Kiran Mistry · Accepted Answer · 2021-05-13 13:10:24Z

0

Try this, You can use let i = index to get the index

<div *ngFor="let code of getCode(); let i = index" [ngStyle] ="{'color': (i==1) ? 'aqua' : 'black'}"> {{i}} <br></div>

edited May 13, 2021 at 13:10

Kiran Mistry

2,7253 gold badges14 silver badges29 bronze badges

answered May 13, 2021 at 12:58

vinay jain

936 bronze badges

Collectives™ on Stack Overflow

Angular - Conditional Formatting in for loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related