Take a JSON that contains images and some other data along with it. Need to arrange those images in UI. Those Images should be clickable. On clicking any of the images need to show the count of the selected images on the top of the image. let's say If I select one image, then on that image 1 should be shown and I select any other than it should be shown with the count at the top. After selecting some images (ex: 1,2,3,4,5). Now if I de-select the image which is having count as 3 then UI the remaining images count should be (1,2,3,4).

CodePudding user response：

1. Add a key to your JSON as "count": 0 and show that count on the image when clicked that image.
2. declare a global variable named count:any = 0; and increase this count by 1 when clicked on the image and map this.count value to the object's key count
3. Next create an array and push the same item to the array on click of the image who's count value we have just updated in step 2.
4. Next when the image is de-selected, reset global count variable value and apply reset the count values of objects of JSON by iterating using a for loop.

please find the example here