Home/ Questions/Q 1997
In Process
Garry Christan
Asked: 2022-08-03T05:42:14+00:00

show 1 data instead of all ngFor – Angular 11

Im trying to display total counts of enrollment with item.male_students & item.female_students

UPDATE
remove the ngFor now it works as expected. here’s my component.html

<thead class="thead-zircon">
    <tr>
        <th>
            Total Enrollment Quick Count
        </th>
    </tr>
</thead>
<tbody class="list">
    <tr>
        <td>
            {{ item.male_students + item.female_students }}
        </td>
    </tr>
</tbody>

UPDATED
here’s my component.ts

data: []; 

  constructor(private apiService: ApiService) {
    super();
  }

  ngOnInit(): void {
    this.getEnrollMentCountBySex();
  }

  getEnrollMentCountBySex() {
    this.apiService.getAll('enrollments', "/count-student-enrollment-by-sex-and-academic-level")
    .subscribe(data => {
      this.data = data;
      this.maleCount = data.reduce(((acc, item) => acc + item.male_students), 0);
      this.femaleCount = data.reduce(((acc, item) => acc + item.female_students), 0);
    });
  }

Im getting object. Here’s and image from api endpoint

enter image description here

UPDATE
But im getting all the index. I only want the total count of male & female students to be shown in table

enter image description here

angularngfor
Share

1 Answer

  1. You can do it as soon as you receive data from ajax. That’s the good way I would suggest you in this case.

    getEnrollMentCountBySex() {
   this.apiService.getAll('enrollments', "/count-student-enrollment-by-sex-and-academic-level").subscribe(data => {
      this.data = data;
      this.maleCount = data.reduce((acc, item) => acc + item.male_students), 0);
      this.femaleCount = data.reduce((acc, item) => acc + item.female_students), 0);
   });
}

    HTML

    Male Count - {{ maleCount }}
Female Count - {{ femaleCount }}

    If data is being modified from user in your case and we wanted to keep UI bindings updated. Then definitely using Pipe or function call on binding would be a better idea.

    @Pipe({name: 'countByProp'})
export class CountByPropPipe implements PipeTransform {
  transform(data: any, prop: string): number {
    if (!prop) throw new Error('Please pass property name');
    return data.reduce((acc, item) => acc + item[prop]), 0);
  }
}

    HTML

    Male Count - {{ data | countByProp: 'male_students' }}
Female Count - {{ data | countByProp: 'female_students' }}

    TS

    Define maleCount and femaleCount variable in your HomePage.ts

    maleCount = 0;
femaleCount = 0;
    • 0

Leave an answer

You must login to add an answer.

Need An Account,