0

I am using mat-accordion with router-outlet and observing a strange behaviour. Below is a sample implementation of my use case.
https://stackblitz.com/edit/angular-material-accordion-with-router

In this example, panel 3 component and panel 4 component are having router-outlet. Now in first time navigation it works as expected. But if I collapse those panels and again try to open them I find that content of panel 4 gets reflected in panel 3.

I am not sure if its a bug in angular-router or am I doing something wrong here.

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
Mahesh
  • 1,427
  • 2
  • 19
  • 42
  • Router trace shows that these components are getting loaded as expected. like Panel-three-content on panel3 url and Panel-four-content on panel4 url. Yet on UI the result is different. – Mahesh Jul 02 '19 at 15:26
  • Not sure, but I think it might be related to the fact that you have two ``s on the page - one in panel3 and one in panel4. I think they should be named differently so that the routes can target one or the other outlet. – G. Tranter Jul 02 '19 at 17:29
  • Thanks @G.Tranter for response. But isn't that a valid scenario. Actually those two ``s are in different components and on different routes. So ideally those should work independently. – Mahesh Jul 03 '19 at 07:04
  • some updates and observation: I've added one span outside ``. Now this span is being shown twice. Surprisingly on panel 3 if I play around a bit, it starts showing span for both, panel 3 and panel 4. This is really strange. – Mahesh Jul 03 '19 at 07:13
  • Check this [stackoverflow answer](https://stackoverflow.com/questions/38038001/multiple-named-router-outlet-angular-2) It can help you. – nitin9nair Jul 03 '19 at 07:19
  • Thanks @nitin9nair. Tried this but even that approach is not helping – Mahesh Jul 03 '19 at 10:43
  • I'm right about the multiple outlets - see my answer for a detailed explanation and the fix. – G. Tranter Jul 03 '19 at 16:03

1 Answers1

1

You've mixed up routes and outlets with non-routes and components. Routes are used to display specified components in outlets, and your template uses those same components. You should only be doing one or the other - either place the component in the template directly or use a route to display it in an outlet.

Your template places all four 'panel' components on the page, and two of them (3 and 4) define outlets. Therefore you have two outlets on your page. Since they are not named, they are both trying to be the default or 'primary' outlet for your router, so any routing that is not directed at a named outlet (which is all of your routing) goes to one of those (or maybe both - I don't know how Angular handles this).

You are also using routes for components that aren't routes (panels 1 and 2). For example, if you open your panel 1, and then open the DOM inspector, you will see another panel 1 component in the outlet for either panel 3 or 4.

The fix is to remove the components that are not actual routes from the routing - 'panel1' and 'panel2', and to name the two outlets and target those outlets using the router and link configurations.

Stackblitz

G. Tranter
  • 16,766
  • 1
  • 48
  • 68
  • Thanks for your answer. I need those routes in panel 1 and panel 2 because I have some navigation from other part of application which are expected to land directly on specified panel. I am surprised how angular is copying components in both `` ? – Mahesh Jul 04 '19 at 11:23
  • Not really surprising as having multiple unnamed outlets on the page is not supported - so you can't count on predictable behaviour. – G. Tranter Jul 04 '19 at 14:06