In my project, I have left side menu (like a side nav) that is developed using mat-tree and right side that show the contents when we select or click menu on left side. Here, the highlighted with yellow is built using mat-tree sideNav and contents If we select any option from left side, say for example if I select "checkbox" as in given link Content on selection of menu then the right side should load content without refresh and retain the left side nav. Sample link for reference, https://material.angular.io/components/checkbox/overview
Note: I already have a in my app.component.html. This left nav and right side content is developed in diff component.html. So, I will need a another in a different component apart from app.component.html. I tried having in the component. When I navigate it's routing to a new page. What I want is to show in same page on right side.
You can use the routing: https://angular.io/guide/router
In your root component's template (app.component.html), you can have the following structure:
<app-with-mat-tree></app-with-mat-tree>
<router-outlet></router-outlet>