-1

I am working on a angular application. I am facing some issues in *ngFor. my code is as follows

https://stackblitz.com/edit/ngx-slider-simple-slider-example-xfkvcj?file=src%2Fapp%2Fapp.component.html

The problem I am facing is if I click on second box then with it fourth box is getting clicked automatically and same is the case with first value. I want if I click on second box then only second box is clicked and same follows with other boxes. How can I do that?

1 Answers1

2

It's because ngFor is looping on your Array, so each time angular is creating two li node. You need to have only one li and to put ul node outside the loop too.

Here is an example based on id : https://stackblitz.com/edit/ngx-slider-simple-slider-example-uqyu62?file=src/app/app.component.html

update (see comment) based on this link : https://stackblitz.com/edit/angular-mat-card-example-d8nydd?file=src%2Fapp%2Fapp.component.ts

If you really can't update your myData structure, you can manage state of each card in a external variable : https://stackblitz.com/edit/angular-mat-card-example-bwuduo?file=src/app/app.component.ts

Twen
  • 302
  • 2
  • 6
  • I am looping this array and showing data on mat card. I want to necessarily have two tabs on each mat card . how can I do that –  Apr 26 '21 at 13:50
  • I have similar scenrior as mentioned in this stackblitz https://stackblitz.com/edit/angular-mat-card-example-d8nydd?file=src%2Fapp%2Fapp.component.ts –  Apr 26 '21 at 14:04
  • Is it possible to do this without modifying myData Array? –  Apr 26 '21 at 14:06
  • if you got only two tab, yes but if it's dynamic it's more tedious. With two tab, you don't need to iterate over the item, so you can remove the ngFor and put two li node. But you got to have the selected state separate for each card. – Twen Apr 26 '21 at 14:10
  • Could you please update my stackblitz https://stackblitz.com/edit/angular-mat-card-example-d8nydd?file=src%2Fapp%2Fapp.component.ts It will be helpful to understand. I have to necessarily keep *ngFor as with the data I am doing other functionality as well. I just posted the part for which I am facing issue –  Apr 26 '21 at 14:13