how to load the data before the component is rendered in the Angular-CodePudding

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?

CodePudding user response：

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}
  }
});

CodePudding user response：

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.