2

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.

JayashreeJK
  • 23
  • 4
  • So you need to render components in another component without routing change based on the selection in the sidenav? – Robert garcia Oct 04 '19 at 07:59
  • On selecting it from mat-tree, it would hit the URL, the URL will have a tableau data. Need to show that URL content on the right side. - @Robertgarcia – JayashreeJK Oct 04 '19 at 08:48

2 Answers2

1

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>
NikNik
  • 2,191
  • 2
  • 15
  • 34
  • Hi @NikNik Thanks. But there is a problem I'm facing. I already have a in app.component.html. And I need a one more in another template, i.e in another component.html. – JayashreeJK Oct 10 '19 at 02:35
0

In order to load any component in a particular section of a page you need to use <router-outlet></router-outlet> tag

I have created a simple demo for your understanding: https://stackblitz.com/edit/angular-mof1tg

Happy Coding :)

Sudipto Mukherjee
  • 807
  • 6
  • 11