The page movement does not occur, so you do not use the router. However, when you click on a particular element, a new window created with the mat dialog of the Angular appears and shows the data. At this time, the data is received from the server. The current data load is slow, so the user can see the change from the initial value to the value from the server.
Is there a way to get the data before the component is rendered?
Usually, one thing you can do is create the component but keep it hidden so that when it does get shown, the data is already loaded. That may be difficult with a MatDialog so you might want to pre-load the data in your main component and then pass the data into your MatDialog when it opens (see the data input for MatDialog https://material.angular.io/components/dialog/api#MatDialogConfig)
Example:
this.dialog.open(YourComponent, {
data: {
someText: "Hello world",
someData: {id: 1}
}
});
Just trying to help, I am not angular expert but looking into angular life cycles will be a great start for this problem this will not only help you with this problem but also will help you properly utilize angular.
In case, you use Observables for getting data from the server, you can not subscribe manually in the component on ngOnInit of the component, you can just async pipe for getting and displaying data in the template