Custom Pagination in Angular 14
https://www.youtube.com/watch?v=GXtqDKlT2js[image: sddefault.jpg]
On Thursday, January 14, 2021 at 7:26:42 PM UTC+5:30 shashw...@gmail.com
wrote:
> Hi Arnaud,
>
> Thanks for replying.
> I am printing the value of totalEmp. It is showing up every time.Then I
> tried to put paginator part under ngAfterInit() and it worked fine.
>
> Also can you suggest me what would be best practice to declare pagination
> so that it works perfectly fine under any circumstances.
>
>
> Regards,
> Shashwat Tyagi
>
>
> On Tue, Jan 12, 2021, 18:03 Arnaud Deman <arnaud...@io.cool> wrote:
>
>> Hi,
>>
>> You could display the value of totalEmp directly in your template to see
>> if its value is correct. You could also add some debug in your component,
>> especially in the error callbacks. And I think pageIndex is undefined,
>> according to the code you posted.
>>
>> Regards,
>> Arnaud.
>>
>>
>> On Monday, 11 January 2021 at 13:26:31 UTC+1 shashw...@gmail.com wrote:
>>
>>> I am trying to call API on the click of pagination. Initially, I had set
>>> the length statically and it was working fine. I was able to do a
>>> pagination API call.And then I had tried to set the length dynamically as
>>> well and it worked too, but later on, it stopped working. Please help me to
>>> point out my mistake. I am setting the length of content in this.totalEmp
>>> and able to print it on html side as well but when I am trying to set in
>>> mat-paginator for [length]. It is not working for me.I tried to set
>>> #paginator in mat-paginator as well but no change was seen
>>>
>>> Below is my implementation
>>>
>>> **HTML:**
>>>
>>> <mat-paginator
>>> [length]="totalEmp"
>>> [hidden]="normalPagination"
>>> [pageSize]="2"
>>> [pageSizeOptions]="[2]"
>>> [pageIndex]="pageIndex"
>>> (page)="pageEvent = getDataByPagination($event)"></mat-paginator>
>>>
>>>
>>> **.ts file Code**
>>> export class EmpComponent implements OnInit {
>>>
>>> dataSource: any;
>>> totalEmp: number=0;
>>> normalPagination: boolean;
>>>
>>> @ViewChild(MatPaginator, { static: true }) paginator:
>>> MatPaginator;
>>> @ViewChild(MatSort, { static: true }) sort: MatSort;
>>>
>>> ngOnInit() {
>>> this.getTableContentCount();
>>> }
>>>
>>>
>>> getTableContentCount() {
>>> this.myService.CountService().subscribe(
>>> (response: any) => {
>>> if (response) {
>>>
>>> this.totalEmp = response;
>>> this.getServerData(0,this.totalEmp);
>>> }
>>> },
>>> (error: any) => { }
>>> );
>>> }
>>>
>>> public getDataByPagination(event?: PageEvent) {
>>> this.myService.getPaginationService(event).subscribe(
>>> response => {
>>> if (response) {
>>> this.showLoader=true;
>>> this.normalPagination=false;
>>> this.total = this.totalEmp;
>>> this.allData=response;
>>> this.dataSource = new MatTableDataSource(this.allData);
>>> this.dataSource.paginator = this.paginator;
>>> this.dataSource.sort = this.sort;
>>> this.showLoader=false;
>>> }
>>> },
>>> error => {
>>> // handle error
>>> }
>>> );
>>> return event;
>>> }
>>>
>> --
>> You received this message because you are subscribed to a topic in the
>> Google Groups "Angular and AngularJS discussion" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/angular/3GWO2UYhl1U/unsubscribe.
>> To unsubscribe from this group and all its topics, send an email to
>> angular+u...@googlegroups.com.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/angular/a1fc2542-0df4-4072-87fd-b4433df1beaan%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/angular/a1fc2542-0df4-4072-87fd-b4433df1beaan%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>>
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/63531385-f574-45b4-90fc-cf837bae7816n%40googlegroups.com.
