Upon detecting changes, the NgOnChanges function triggers an infinite service call to update the table, a situation that currently perplexes me. Any assistance on this matter would be greatly appreciated. Many thanks.
The TableMultiSortComponent functions as the parent component in my setup, with the output EventEmitter passing along the table data.
The event emitted by the EventEmitter is transmitted to the child component where I utilize parameters like pagesize and pageindex for querying purposes within the dataServiceEvent function.
Subsequently, the request's output, dealsListData, is relayed from the child component back to the parent component as data destined for populating the table.
The intended behavior is for the table to dynamically update when changes occur, which led me to place it under the ngOnchanges method, specifically the initTableMultiSort function. However, the table undergoes repeated updates indefinitely instead of just once following a change.
https://i.sstatic.net/KTUUN.png
#Within this.parent component, data transmission towards the child component is facilitated through: this.dataServiceEvent.emit(this.table); given its necessity for attributes like pageindex and size.
https://i.sstatic.net/xZQsb.png
#HTML CODE - Parent Component
<mat-card *ngIf="table !== undefined">
<mat-table mat-table [dataSource]="table.dataSource" matMultiSort (matSortChange)="table.onSortEvent()">
<ng-container *ngFor="let column of table.columns" [matColumnDef]="column.id">
<mat-header-cell class="table-multi-sort-header" *matHeaderCellDef [mat-multi-sort-header]="column.id">
<div>{{column.name}}</div>
<div class="sub-text">{{getColumnSubtitle(column.id)}}</div>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<ng-container *ngIf="column.id !== 'action'; then col; else actionCol"></ng-container>
<ng-template #col>
<app-table-multi-sort-cell-default [cellData]="row" [id]="column.id" [subId]="getColumnSubId(column.id)"></app-table-multi-sort-cell-default>
</ng-template>
<ng-template #actionCol>
<app-table-multi-sort-cell-action [rowData]="row" [actions]="getActions(column.id)" (actionClickEvent)="clickTableAction($event,row)"></app-table-multi-sort-cell-action>
</ng-template>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="table.displayedColumns; sticky:true"></mat-header-row>
<mat-row *matRowDef="let item; columns: table.displayedColumns;"></mat-row>
</mat-table>
<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
</mat-card>
#ts code- parent component
export class TableMultiSortComponent implements OnInit {
@Input() tableOptions:any;
@Input() tableData:any = [];
@Input() isClientSide:boolean = false;
@Input() isLoading: boolean = false;
@Output() tableActionsEvent = new EventEmitter<any>();
@Output() dataServiceEvent = new EventEmitter<any>() ;
@ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;
tableConfig: any = TABLE_MULTI_SORT_OPTIONS.DEFAULT;
table:TableData<any>;
displayedColumns: any;
constructor() { }
ngOnInit(): void {
this.initTableMultiSort();
}
initTableMultiSort(){
this.tableConfig = {
...this.tableConfig,
...this.tableOptions
}
// Rest of the initialization process goes here...
}
ngOnChanges(changes: SimpleChanges) {
if (changes.tableData && changes.tableData.currentValue){
console.log("changes" , changes)
this.initTableMultiSort()
}
}
getData(){
// Method logic for getting data...
}
#child component HTML code
<app-table-multi-sort (dataServiceEvent)="dataServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="dealsListData" (tableActionsEvent)="tableActions($event)"></app-table-multi-sort>
#child component ts code
export class DealsTransactionComponent implements OnInit {
// Child component functionality and methods implementation...