How to show the current number of counted looping items using Angular?

Question

In my project I have a product page and i display the product item's photos in a bootstrap carousel using Angular. What i want is to display at the top of the carousel the number of item's images like that: 1 of 18 images and when someone clicks the carousel's next button to change it to 2 of 18 images, 3 of 18 images etc.

I used .length to get/print the number of the total images of the product item eg:

{{ productItem.photos.length }}

so it displays now: 18 images But how can i make it to display 1 of 18 images?

I am new in Angular

https://stackoverflow.com/questions/35405618/ngfor-with-index-as-value-in-attribute there is a index functionality in ngFor loop, you can use it — Nambi N Rajan, Apr 04 '22 at 11:13

Joosep Parts · Answer 1 · 2022-04-05T01:53:31.313

0

Use index on *ngFor. On each loop iteration index is increased by one, like it would be on a normal for loop.

<div *ngFor="let image of images; index as i">
index is: {{i}}
</div>

edited Apr 05 '22 at 01:53

answered Apr 04 '22 at 11:12

Joosep Parts

5,372
2
8
33

score 0 · Answer 2 · answered Apr 04 '22 at 11:28

0

<div *ngFor = "let image of product.images, index as i">
  {{i}} of {{product.images.length}}
</div>

answered Apr 04 '22 at 11:28

Mox Shah

13
6

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Apr 04 '22 at 14:46
Okay will keep this in mind – Mox Shah Apr 06 '22 at 06:50

score 0 · Answer 3 · edited Apr 04 '22 at 14:46

The ngForOf directive is generally used in the shorthand form ngFor. In this form, the template to be rendered for each iteration is the content of an anchor element containing the directive.

productItem.component.ts

import { Component} from '@angular/core';

@Component({
    selector: 'my-productItem',
    templateUrl: './productItem.component.html',
    styleUrls: []
})
export class AppComponent
{
    productItem= ["product1", "product2", "product3","product4"];
}

productItem.component.html

<li *ngFor="let item of productItem; let i = index">
      {{i+1}} of {{productItem.length}}
</li>

How to show the current number of counted looping items using Angular?

3 Answers3