Igniteui-angular: Grid remote paging with if condition not working

[nikunjgajera]

I have requirement for display data in grid as per pagination.
When page load i need to get only required data (as per page record size), not all data.
I found below example
https://stackblitz.com/angular/yoqjjyyndbr

But i need to display grid when i get data from API otherwise grid is hide.
so i added if condition in grid element in remote-paging-sample.component.html file by *ngIf="isShow".
Also create same if condition variable(isShow) in remote-paging-sample.component.ts file
bydefault isShow variable is false because i dont need to show grid when page load
I will set true for isShow variable in ngAfterViewInit function in remote-paging-sample.component.ts file

I get below error
Cannot set property 'paginationTemplate' of undefined
Without if condition example working perfect but with if condition getting error.

remote-paging-sample.component.html

..................
`<igx-grid *ngIf="isShow" #grid1 [data]="data | async" width="960px" height="550px" [paging]="true" [perPage]="perPage">`
...........

remote-paging-sample.component.ts

.............
public isShow:boolean = false;
............
 public ngAfterViewInit() {
        this.remoteService.getData(0, this.perPage);
        console.log(this.remotePager);
        console.log(this.grid1);
        this.grid1.paginationTemplate = this.remotePager;

        this.isShow = true;
    }
....................

please solve this bug

[ddincheva]

Hello @nikunjgajera ,
I investigated the described issue, but it is not a bug. The problem that you are experiencing is due to the incorrect logic construction of your code. It is good to keep in mind that when you perform a http request, this operation executes asynchronously and the data is not loaded when you try to set the pagination template to the grid, which is not yet defined in the DOM. (That is why your are seeing and this error in the console.)
Here is the updated sample with applied the necessary fixes. Please notice that you can define the pagination template in the grid's mark up and also the best time to set the isShow property to true is when you data is loaded.

[nikunjgajera]

@ddincheva thanks.
let me applying this changes in my code and check it

[nikunjgajera]

@ddincheva its working perfectly thanks