Content of tabs are not beeing displyed after reorder the tabs using drag and drop from Material

Question

im trying to implement an order function for users, where they can drag and drop the tabs

the problem which i have now is after the order of the tabs changed, the content the body of the tab is gone. usually i have to change the selected tab multiple times, then the content will be displayed again

before changing the order of the tabs

and after changing the order

i was able to reproduce the problem on stackblitz

im not sure about the problem, is it the implementation, if i misunderstood the Material drag and drop functionality, or is change detection problem, where i need to invoke this manually. i tried to invoke the change detection, but it did not help.

or is it the function moveItemInArray(this.viewsTabs, event.previousIndex, event.currentIndex);, i also tried to re implement it, it did not work also.

i have looked to similar issues, but did not found any.

Answer 1

i was able to solve the problem using the OnChanges lifecycle hook in the component

export class TabComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
if (!changes['tab'].isFirstChange()) {
  this.isOpen = true;
  this.doLoadViewData();
}
}
}

there is the link to stackblitz where the problem solved