Angular 6- pagination not working with data-table - datatable

Question

I am requesting data from the server and able to display it in data table successfully .For some reason i had to use "table mat-table" instead of "mat-table" in html after this the pagination functionality stopped working. It was working fine earlier when i was using "mat-table" element .
Also, the reason for using "table" tag was to dynamically hide the columns with no data which i was not able to do earlier. If there's a work around for this ,please let me know .
Thanks in advance!
public array: any = [];//declaring an empty array
import { MatTableDataSource, MatSlideToggleChange } from '#angular/material';
import {MatPaginator, MatSort} from '#angular/material';
constructor(private router: Router, private Auth: AuthService ) { }
dataSource = new MatTableDataSource(this.data);
displayedColumns: string[] = this.array;//passing array to displayedColumns
#ViewChild(MatPaginator) paginator: MatPaginator;
#ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
getRecords(event){
event.preventDefault();
const target = event.target;
this.someService.getDetails()
.subscribe(
data =>{
this.Response=data.data,
this.dataSource.data = this.Response,
console.log("fetched data :",this.Response);
for (var item of Object.keys(this.Response[0])){
this.array.push(item);// PUSHING THE FETCHED COLUMNS TO ARRAY
}
}
);this.resetArray();
}
<div class="mat-elevation-z8">
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="userId">
<mat-header-cell *matHeaderCellDef>User Id</mat-header-cell>
<mat-cell *matCellDef= "let element">{{element.userId}}</mat-cell>
</ng-container>
<ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
<mat-cell *matCellDef= "let element">{{element.title}}</mat-cell>
</ng-container>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
<mat-cell *matCellDef= "let element">{{element.id}}</mat-cell>
</ng-container>
<ng-container matColumnDef="completed">
<mat-header-cell *matHeaderCellDef>Completed</mat-header-cell>
<mat-cell *matCellDef= "let element">{{element.completed}}</mat-cell>
</ng-container>
<ng-container matColumnDef="blank">
<mat-header-cell *matHeaderCellDef>Blank</mat-header-cell>
<mat-cell *matCellDef= "let element"></mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns" style="background-color:#bcd8f1;border-color: red;"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
Data table shows the records with dynamic columns and pagination works fine ,but instead of showing new data only, the data table columns are appended with prevoiously loaded columns and then gets displayed.

Answer 1

From your stackblizt.
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
/*
These variables are not needed
*/
// public data: any = [];
// public array: any = [];
dataSource = new MatTableDataSource([]);
displayedColumns: string[] = [];
// View child require 2 PARAMS
#ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
#ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private service: Service) { }
ngOnInit() {
this.loadData();
}
showTable() {
// I dont know what you really want to do here.
if(this.dataSource.data.length === 0){
this.loadData();
}
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
loadData() {
this.service.getAuthRecords1().subscribe(
data => {
this.dataSource.data = data as any,
console.log("dummy data :", data);
if (this.displayedColumns.length === 0){
this.displayedColumns = Object.keys(data[0]);
}
});
}
}