Angular ngFor index serial number

Question

I have a list of items that contains country and city names like following and I want to show the serial number for a specific type of item in list.

items = [
    {'type': 'Country', 'title': 'Armenia',  },
    {'type': 'City', 'title': 'Kapan'   },
    {'type': 'City', 'title': 'Goris'   },
    {'type': 'City', 'title': 'Hats’avan' },

    
    {'type': 'Country', 'title': 'Angola'  },
    {'type': 'City', 'title': 'Catabola'  },
    {'type': 'City', 'title': 'Camacupa' },
    {'type': 'City', 'title': 'Caluquembe'  },

    {'type': 'Country', 'title': 'Argentina'  },
    {'type': 'City', 'title': 'San Vicente'  },
    {'type': 'City', 'title': 'Santa Elena'  },
    {'type': 'City', 'title': 'Retiro'  },
  ];


<div>
    <p *ngFor="let item of items; let i=index;">
        <b>{{i+1}}.</b>&nbsp;&nbsp;{{item.title}} &nbsp; ({{item.type}})
    </p>
</div>

it is showing like this:

1.  Armenia   (Country)

2.  Kapan   (City)

3.  Goris   (City)

4.  Hats’avan   (City)

5.  Angola   (Country)

6.  Catabola   (City)

7.  Camacupa   (City)

8.  Caluquembe   (City)

9.  Argentina   (Country)

10.  San Vicente   (City)

11.  Santa Elena   (City)

12.  Retiro   (City)

But I want to display like this: ( Serial number should display only with city name )

    Armenia   (Country)

1.  Kapan   (City)

2.  Goris   (City)

3.  Hats’avan   (City)

    Angola   (Country)

4.  Catabola   (City)

5.  Camacupa   (City)

6.  Caluquembe   (City)

    Argentina   (Country)

7.  San Vicente   (City)

8.  Santa Elena   (City)

9.  Retiro   (City)

Here is the stackblitz where I tried

https://stackblitz.com/edit/angular-serial-number-dynamic-conditional?file=src/app/app.component.html

Austin T French · Accepted Answer · 2020-12-10 14:09:00Z

1

You don't have that "serial" property. So Although you could do:

<b *ngIf="item.type == 'City'" >{{i+1}}.</b>

It's going to show the index, and not the "rank" which I think is a more correct term here.

instead, what you want appears to be more of calling a function and using that value:

 ngAfterViewInit(){
   this.lastRank = -1;
 }

  getNextRank(){   
    this.lastRank++;   
    return this.lastRank;
  }

ts:

<b *ngIf="item.type == 'City'"> {{getNextRank()}} </b>

And while this gets you closer, it has some fundamental problems in Angular. I wouldn't do it, even if it "makes sense" as someone newer to Angular.

Instead, the better route would be to use Hidden, but push the correct property onto the array:

import { AfterViewChecked, AfterViewInit,  Component, OnInit,  VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  

 ngAfterViewInit(){
   let lastRank = 0;

   this.items.forEach(e => {
    if(e.type == "City"){
      lastRank++;
      e.cityRank = lastRank;
    }
   });
 }


  items: Place[] = [
    { type: "Country", title: "Armenia" },
    { type: "City", title: "Kapan" },
    { type: "City", title: "Goris" },
    { type: "City", title: "Hats’avan" },

    { type: "Country", title: "Angola" },
    { type: "City", title: "Catabola" },
    { type: "City", title: "Camacupa" },
    { type: "City", title: "Caluquembe" },

    { type: "Country", title: "Argentina" },
    { type: "City", title: "San Vicente" },
    { type: "City", title: "Santa Elena" },
    { type: "City", title: "Retiro" }
  ];
}

export class Place 
{
  type: string;
  title: string;
  cityRank?: number;
}

And the HTML:

<div>
  <p *ngFor="let item of items; let i=index;">
    <b [hidden]="item.type=='Country'"> {{item.cityRank}} </b>
  &nbsp;&nbsp;{{item.title}} &nbsp; ({{item.type}})
  </p>
</div>

updated stackblitz

And result:

answered Dec 10, 2020 at 14:09

Austin T French

5,1801 gold badge29 silver badges44 bronze badges

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

2 Comments

Vimal Patel Over a year ago

Any particular reason for adding the increment logic in "ngAfterViewInit" event instead of "ngOnInit" event?

Austin T French Over a year ago

@VimalPatel none at all!

Vimal Patel · Accepted Answer · 2020-12-10 13:38:40Z

0

Approach 1:

There are many ways to hide the serial numbers. Simplest is to add a [hidden] attribute to hide it when item type is country. Like below.

[hidden]="item.type=='Country'"

Approach 2:

If you want to keep the indentation same create a class name as hide like below and apply that class using ngClass if condition is true.

.hide {
  visibility: hidden;
}

<b [ngClass]="{'hide':item.type=='Country'}">

answered Dec 10, 2020 at 13:38

Vimal Patel

3,1152 gold badges27 silver badges39 bronze badges

2 Comments

Ghazni Over a year ago

no, the serial number is then skipping the serial of country

Vimal Patel Over a year ago

so you dont want to skip the numbers?

Nilesh Patel · Accepted Answer · 2020-12-10 14:03:47Z

0

Here is the solution added a new getter


  get __items() {
    let i = 0;
    let newItem: { type: string; title: string; counter: number };
    return this.items.map(item => {
      if (item.type === "City") {
        i++;
      }
      newItem = Object.assign({}, item, { counter: i });
      return newItem;
    });
  }

and use it in template

<div>
    <p *ngFor="let item of __items">
        <b *ngIf="item.type==='City'">{{item.counter}}.</b>&nbsp;&nbsp;{{item.title}} &nbsp; ({{item.type}})
    </p>
</div>

stackblitz link https://stackblitz.com/edit/angular-serial-number-dynamic-conditional-xsft3e

edited Dec 10, 2020 at 14:03

answered Dec 10, 2020 at 13:44

Nilesh Patel

3,3079 silver badges13 bronze badges

2 Comments

Ghazni Over a year ago

Catabola should start with 4. not 5. it seems 4 is missing..

Nilesh Patel Over a year ago

fixed it..please check

MoxxiManagarm · Accepted Answer · 2020-12-10 14:23:50Z

0

You could use the ol html tag and render only cities within the li tag.

<div>
    <ol style="list-style-type: decimal;">
        <ng-container *ngFor="let item of items">
            <li *ngIf="item.type === 'City'; else country">
                {{ item.title }}
            </li>
            <ng-template #country>
                {{ item.title }}
            </ng-template>
        </ng-container>
    </ol>
</div>

See forked stackblitz:

https://stackblitz.com/edit/angular-serial-number-dynamic-conditional-esgwc3?file=src/app/app.component.html

answered Dec 10, 2020 at 14:23

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Collectives™ on Stack Overflow

Angular ngFor index serial number

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related