mat-sort and paginator is not working in ng-modal table. But outside modal it is working properly. Are there any workaround for this issue?

CodePudding user response：

The problem is that, when you try asign the mat-sort, the mat-sort is not reachable -because really it's not displayed-. You need asign the mat-sort after displayed. If you're using mat-dialog, when you open use a setTimeout(). You can think setTimeout as you say to Angular: "After render, don't forget execute this instructions"

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {name: this.name, animal: this.animal}
});
setTimeout(()=>{ //<--here you say to Angular the sort
   this.dataSource.sort = this.sort;
})

open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
    setTimeout(()=>{ //<--here you say to Angular the sort
       this.dataSource.sort = this.sort;
    })
  }

@ViewChild(MatSort) sort: MatSort;

NOT use {static true} -static true it's used only if the element is always displayed in the component-

Update really the solution proposed not work. Inside a template the "viewChild are not accesible. So the only I get is create a fool directive

@Directive({
  selector: '[fool]',
  exportAs: 'fool'
})
export class FoolDirective implements OnInit {
  ngOnInit()
  {
    setTimeout(()=>{
      (this.table.dataSource as any).sort=this.sort
    })
  }
  constructor(@Optional() private sort:MatSort,@Optional() private table:MatTable<any>){}
}

So, we only need add this directive to our table

<table mat-table [dataSource]="dataSource"
  matSort fool
  class="mat-elevation-z8">
 ....
</table>

See the stackblitz