0

I have angular 2 code which displays a grid with a number of fields, each field has a filter. I want to display the number of items returned when a filter is run. I do this by counting the number of rows currently on the screen and use ngAfterViewChecked() to get the number once it changes. The issue i am facing, the correct number is only displayed after the 2nd event happens. For example, in the below picture, 1 item is returned from the filter but it says 'Showing 11 users of 13 in total'. However, if i click the mouse or press a key that will change it to 'Showing 1 users of 13 in total'. I have also tried to use ngAfterContentChecked()

enter image description here

ngAfterViewChecked() : void {

        this.numOfUsersOnPage = document.getElementsByClassName("ui-datatable-even").length;
        this.changeDetection.detectChanges();

}
<div class="grid-padding">
        <span *ngIf="showNumOfUser"> Showing {{numOfUsersOnPage}} users of {{totalNumOfUsers}} in total </span>
</div>
BrianM
  • 115
  • 3
  • 11
  • Why are you doing manual change detection instead binding to models and events and the let Angular do it's thing? – Daniel B Jun 19 '18 at 08:21
  • i added this into the html code : Showing {{numOfUsersOnPage}} users of {{totalNumOfUsers}} in total but i get an error saying - No value accessor for form control with unspecified name attribute – BrianM Jun 19 '18 at 08:53

0 Answers0