Just starting out with angular and decided to work on a small project. As I was setting up my routing, I encountered a problem. Here is the routing setup I have:
const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: LandingComponent},
{path: 'menuitem', component: MenuItemComponent, children: [
{path: 'create', component: MenuItemCreateComponent},
{path: ':id', component: MenuItemDetailComponent}
]},
{path: 'cart', component: CartComponent}
];
I wanted to find a way for 'menuitem' to be ignored so that navigation would directly go to its children. For example, if I want to load a specific id like 'menuitem/2', it should load the menu item with id = 2.
I had been following a tutorial which used the parent path to display a list of items, but somehow I forgot about this and needed to refer back to see how they did it there. In my setup, LandingComponent displays the initial landing page where everything is shown at first run.
Is there a method to skip the parent path in this scenario? Currently, 'menuitem/:id' or 'menuitem/create' stops at MenuItemComponent.
The html for the landing component looks something like this:
<div class="grid-container">
<div id="category-list">
<app-category></app-category>
</div>
<div id="menu-item-list">
<app-menu></app-menu>
</div>
</div>
For the menu item component, the starting html is simply
<p>menu-item works!</p>