Mat Paginator not working with *ngIf in angular

Question

I want to display the table based on the user selection, for example if user selects Posts - it should display table with all Post content. Likewise, if user selects Todo - it should display Todo table and so on. I created different datasource and I've different paginator for each datasource. But pagination is not working as expected.

Post has total 100 records

Todo has total 200 records

User has total 10 records

By default Post section loads and it shows table has 1-10 of 100 with proper pagination. When I switch from Post to Todo section - table shows only 1-10 of 10 but Todo has total 200 records - not sure why its overriding User datasource number of records in post and todo datasource. When I switch again from Todo to Post section, here also I see 1-10 of 10 instead 1-10 of 100 and pagination navigation not working.

Please find my code below - could you please help why User datasource overriding when conditional div switch happens?

Appreciated your help in advance. Thanks!

I'm using Angular: 13.2.5

demo-service.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort, Sort } from '@angular/material/sort';
import { MyService } from './my-service';
import { Todo } from './todos';


@Component({
    selector: 'demo-service',
    templateUrl: './demo-service.component.html',
    styleUrls: ['./demo-service.component.scss'],
    animations: [
        trigger('detailExpand', [
            state('collapsed', style({ height: '0px', minHeight: '0' })),
            state('expanded', style({ height: '*' })),
            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
    ],
})
export class DemoServiceComponent implements OnInit {
    selectedProject: string = 'Posts';
    todoDataSource = new MatTableDataSource();
    toDoColumns = ['userId', 'title', 'completed'];

    postDataSource = new MatTableDataSource();
    postColumns = ['userId', 'title', 'body'];


    userDataSource = new MatTableDataSource();
    userColumns = ['id', 'name', 'username', 'email'];

    private postPaginator: MatPaginator;
    private postSort: MatSort;

    @ViewChild(MatSort, { static: false }) set postmatSort(ms: MatSort) {
        this.postSort = ms;
        this.setPostDataSourceAttributes();
    }

    @ViewChild(MatPaginator, { static: false }) set postmatPaginator(mp: MatPaginator) {
        this.postPaginator = mp;
        this.setPostDataSourceAttributes();
    }

    setPostDataSourceAttributes() {
        this.postDataSource.paginator = this.postPaginator;
        this.postDataSource.sort = this.postSort;
    }

    private todoPaginator: MatPaginator;
    private todoSort: MatSort;

    @ViewChild(MatSort, { static: false }) set matSort(ms: MatSort) {
        this.todoSort = ms;
        this.setTodoDataSourceAttributes();
    }

    @ViewChild(MatPaginator, { static: false }) set matPaginator(mp: MatPaginator) {
        this.todoPaginator = mp;
        this.setTodoDataSourceAttributes();
    }

    setTodoDataSourceAttributes() {
        this.todoDataSource.paginator = this.todoPaginator;
        this.todoDataSource.sort = this.todoSort;
    }

    private userPaginator: MatPaginator;
    private userSort: MatSort;

    @ViewChild(MatSort, { static: false }) set usermatSort(ms: MatSort) {
        this.userSort = ms;
        this.setUserDataSourceAttributes();
    }

    @ViewChild(MatPaginator, { static: false }) set usermatPaginator(mp: MatPaginator) {
        this.userPaginator = mp;
        this.setUserDataSourceAttributes();
    }

    setUserDataSourceAttributes() {
        this.userDataSource.paginator = this.userPaginator;
        this.userDataSource.sort = this.userSort;
    }


    /**
     * Constructor
     */
    constructor(
        private myService: MyService
    ) { }

    loadData() {
        this.onGetToDo();
        this.onGetPost();
        this.onGetUser();
    }

    onGetToDo(): void {
        this.myService.getTodo().subscribe(
            (response) => {
                this.todoDataSource.data = response;
            },
            (error: any) => {
            },
            () => console.log('Done getting all todos')
        );
    }

    onGetPost(): void {
        this.myService.getPost().subscribe(
            (response) => {
                this.postDataSource.data = response;
            },
            (error: any) => {
                console.log('entering into error block')
            },
            () => console.log('Done getting all posts')
        );
    }

    onGetUser(): void {
        this.myService.getUser().subscribe(
            (response) => {
                this.userDataSource.data = response;
            },
            (error: any) => {
                console.log('entering into error block')
            },
            () => console.log('Done getting all posts')
        );
    }    


    

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

    filterTodoData($event: any) {
        this.todoDataSource.filter = $event.target.value;
    }

    filterPostData($event: any) {
        this.todoDataSource.filter = $event.target.value;
    }
    /**
     * Track by function for ngFor loops
     *
     * @param index
     * @param item
     */
    trackByFn(index: number, item: any): any {
        return item.id || index;
    }

}

demo-service.component.html


    
        
            
                
                    
                        
                            
                                List Data
                        
                    
                
            
            
                
                    
                        {{selectedProject}}
                    
                    
                        
                    
                
                
                    
                    

                    
                
            
        
    

    
        

            
                
                    

                        
                            
                                
                                    
                                    
                                    
                                
                                

                                    
                                            
                                            
                                            

                                         userId 
                                             {{element.userId}} 
                                        


                                         title 
                                             {{element.title}} 
                                        

                                         body 
                                             {{element.body}} 
                                        

                                        

                                        
                                        

                                    

                                    
                                    

                                
                            
                        

                    

                
            
        

    

    
        

            
                
                    

                        
                            
                                
                                    
                                    
                                    
                                
                                

                                    
                                            
                                            
                                            

                                         userId 
                                             {{element.userId}} 
                                        


                                         title 
                                             {{element.title}} 
                                        

                                         completed 
                                             {{element.completed}} 
                                        

                                        

                                        
                                        

                                    

                                    
                                    

                                
                            
                        

                    

                
            
        
    

    
        

            
                
                    

                        
                            
                                
                                    
                                    
                                    
                                
                                

                                    
                                            
                                            
                                            
                                            

                                         id 
                                             {{element.id}} 
                                        


                                         name 
                                             {{element.name}} 
                                        

                                         username 
                                             {{element.username}} 
                                        

                                         email 
                                             {{element.email}}

my-service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { Todo } from "./todos";
import { Post } from "./post";
import { User } from "./user";


@Injectable({ providedIn: 'root' })
export class MyService {

    constructor(private http: HttpClient) { }

    getTodo(): Observable {
        return this.http.get('http://jsonplaceholder.typicode.com/todos');
    }

    getPost(): Observable {
        return this.http.get('http://jsonplaceholder.typicode.com/posts');
    }    

    getUser(): Observable {
        return this.http.get('http://jsonplaceholder.typicode.com/users');
    }  
}

Mat Paginator not working with *ngIf in angular

0 Answers