Is there a way to make the parent component be skipped?

0

Issue

I’m new to angular and wanted to make a small project. I was making my routing when I hit a problem . I have this routing.

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 that ‘menuitem’ gets ignored and navigation goes straight to the children. Like if I want to load a specific id through ‘menuitem/2’, it would go load the menuitem with id = 2.

I was following a tutorial which used the parent path to display the list of items, but I forgot about it and had to review it to check how they did it there. What I did is LandingComponent is what displays, well, the landing page where I display everything that needs to be displayed at first run.

Is there a way to bypass the parent path? Right now, ‘menuitem/:id’ or ‘menuitem/create’ stops at MenuItemComponent.

The landing component html looks 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>

The one for menu item component html is the starting <p>menu-item works!</p>

Solution

After some thinking, I think I found the best answer for my problem. As having a parent path makes things more complicated, I made the children paths from before just a regular path and it works just the way I wanted it to be. My routing looks like this now.

const routes: Routes = [
    {path: 'home', component: LandingComponent},
    {path: 'menuitem/create', component: MenuItemCreateComponent},
    {path: 'menuitem/:id', component: MenuItemDetailComponent},
    {path: 'cart', component: CartComponent},
    {path: '', redirectTo: '/home', pathMatch: 'full'}
];

Answered By – rminaj

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More