Angular Router with children of same component

This is my routes:

app.module.ts

const appRoutes: Routes = [
    { path: 'menu', component: MenuViewComponent,
      children: [
        { path: ':name', component: MenuViewComponent,
          children: [
            { path: ':name', component: MenuViewComponent ,
              children: [
                { path: ':name', component: MenuViewComponent }
              ]
            }
          ]
        }
      ]
    },
    { path: '',      component: LandingViewComponent},
    { path: '**', component: PageNotFoundViewComponent }
];

I have a service that returns this data structure used to make my menus

[
    "name" : "root1",
    "children" : [
            "name" : "folder1",
            "children" : [
                  "name" : "folder1_item1"
            ],
            "name" : "folder2",
            "children" : [
                  "name" : "folder2_item1"
            ]
    ],
    "name" : "root2",
    "children" : [
            "name" : "folder3",
            "children" : [
                  "name" : "folder3_item1"
            ],
            "name" : "folder4",
            "children" : [
                  "name" : "folder4_item1"
            ]
    ]
]

Inside of my MenuViewComponent I have an onInit method that loops through the children of the route and builds up the name variables as a path.

menu-view.component.ts

ngOnInit() {

    var path : string[] = [];
    var cont = this.route;
    var index : number = 0;

    do
    {
      cont.params.subscribe( params => {
        if(params)
          path[index] = params['name'];
      });
      index++;
      cont = cont.firstChild;
    }
    while(cont);

    this.myservice.getMenuItems(path).then(menuItems => this.menuCards = menuItems);
}

This path array is sent as a parameter to my get menu items method which will iterate through the tree and return the menu node and its children for that path.

The MenuViewComponent uses an ngFor to display n number of MenuCardComponents. Which each link to another menu if they have children using a button and the routerLink attribute.

My problem

It doesnt seem angular will update the MenuViewComponent when I click on one of the buttons. It will update the URL in the address bar, but the screen doesnt update. If I manually visit each url (for example: foo.com/menu/root1/folder1) it will display the correct menu choices its just I cant figure out how to make the route work with the button links.

From my understanding I need to somehow reinit MenuViewComponent. But I dont know how to do that.

Any help would be appreciated.

You don’t need a do loop. Observables are kept “alive” and will keep watching for updates without you having to recheck them constantly.

Try this instead:

ngOnInit() {

   this.route.params.subscribe(params => {
        const name = params['name'];
        // Add any other code you need to execute here.
    });
}