I am developing a new SPA where I have a left nav menu and the items in this left-nav menu is driven by the API. Like Dashboard1, Dashboard2
I have created a Dashboard component. When I click on Dashboard1, I should be able to pass Dashboard1 to my Dashboard component and display it right-side. Same case when I click on Dashboard2 on the left nav, I should be able to pass Dashboard2 to my Dashboard Component and display it right-side.
There a couple of different methods for component interaction, but based on your description above I would recommend using the shared service pattern.
Typically, this involves having two components subscribed to a value on the service, which the components have the ability to change. So if you were to click Dashboard1 in the left navigation, it would send this data into the shared service and your right side would be able to pick up this value change and adjust the view accordingly
Here is a guide from the offical docs