angularangular-materialsidenav

How to load a page in specific div using angular7


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.


Solution

  • 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>