Search code examples
angularangular-ng-if

Angular 4 ngFor & ngIf

I'm looking to count the number of quizzes that have been completed in my array, that are equal to "level 1".

Whenever I try to display the count of items that are equal to level 1 in the progressList, it will display the number for all of the items in the progressList array.

How would I display the number of items that have been completed that are equal to Level 1?

 <div *ngFor="let levels of progressList | slice: 0:1; let i = index" align="center">
          <p *ngIf="levels.level == 1"> You've Completed {{progressList?.length}}/4 Lessons! </p>
        </div>

***EDIT w/ Array****

complete: "Complete", level: 1, user_id:"email@email.com"

complete: "Complete", level: 1, user_id:"email@email.com"

complete: "Complete", level: 1, user_id:"email@email.com"

complete: "Complete", level: 2, user_id:"email@email.com"

complete: "Complete", level: 2, user_id:"email@email.com"

Solution

  • Try the following, probably your level is of type string

    <p *ngIf="levels.level === '1'"> You've Completed {{progressList?.length}}/4 Lessons! </p>

    EDIT

    ngIf is not used to filter data. it is to show the elements when condition is met. you can do this to show the count in component.ts

    completedCount : any;

    this.completedCount = progressList.filter(t=>t.level ==1).length;

    and in template 

    <p> You've Completed {{this.completedCount}}/4 Lessons! </p>