Angular2 ngFor how to count the number of looping values?

Question

I am using ngFor to loop 8 json objects and I want not only to loop the values but also I want to count the number of looping values and display the number.

For example,

Answer 1

I agree with above answer, but I would like to provide details for creating dynamic content its better to create your logic in component see below code: I want to display 6 items in one div and remaining in another div

component.ts:

  getMyTasksDueToday(url,duedate){
console.log(this.currentDate);
this.dashboardservices.getGroupedTasksByDueDate(url,duedate).subscribe(
  (modelData: ITasks[]) => {
    //console.log(modelData);
    this._myTasksDueToday = modelData;
    let arr1 = [];
    let arr2 = [];
    let i = 1;
    modelData.forEach((item)=>{
      //console.log(item);
      if(i<=6){
        arr1.push(item);
      }else{
        this._myTasksDueToday_hasPart2 = true;
        arr2.push(item);
      }
      i++;
    });
    this._myTasksDueToday_part1 = arr1;
    this._myTasksDueToday_part2 = arr2;
    //this._myTasksDueToday_part3 = arr3;

    
  },
  error => {
    const res = this.dialogService.ErrorDialog('Server Error', 'Sorry, the system is unavailable at the moment.', 'Close', 'Try again');
    res.afterClosed().subscribe(dialogResult => {
      if (dialogResult) {
        //this.callNext(200);
      }
    });
  }
);

}

and in component.html:

     
              
                  Due Today
              
              
                

                  

                    

                      {{rec.CategoryName}}
                      
                    
                  
                  

                    

                      {{rec.CategoryName}}
                      
                    
                  
          
                
                

                  All