Currently, I am in the process of developing an application that features a map as its header (providing a global view) and another map positioned in the center of the page to showcase detailed views. To demonstrate this setup, I have shared a working example on StackBlitz which you can access here.
In an effort to reduce redundancy in my code, I am aiming to relocate the header map to a parent component so that I can utilize the global map header across multiple pages. This can be achieved through Angular router using the 'children' tag. Essentially, the structure would look like this:
LayoutComponent (global view map) --> <router-outlet> --> HomeComponent (detail view map)
However, I have encountered an issue where only the map in the child component loads. I have replicated this problem in another StackBlitz example which can be accessed here.
I am seeking guidance on whether I have made any errors in my implementation. As of now, I haven't been able to identify any reasons why this code wouldn't function correctly.
Versions
- @agm/core
1.0.0 - Angular
8.2.10