Angular 2/Named Router outlet : Load a diffferent component when route param is available

Question

I am developing a meal planner with a screen for recipes.

Functionality: The screen displays a list of item names and an initial text ('Select a recipe to view details here') Once a recipe is clicked, the details are displayed on the right.

Please view screen setup here

What I have:

(1) Initially http://domain/mealplanner/(recipes:recipes) is loaded to display list of recipes. - Works correctly

(2) Once a recipe is clicked, the url changes to http://domain/mealplanner/(recipes:recipes/0). I expect the RecipeDetail component to be added, but it is not loaded.

The code:

recipes.routing.module.ts

const recipesRoutes : Routes = [
    {path:'mealplanner', children : [
        {path:'recipes', component: RecipesComponent, outlet : 'recipes', children: [
            {path:':recipeId', component: RecipeDetailComponent} ]}  -----------------------------> What should I add here to make it work?
    ]}
];

Inside recipe-item.component.ts

export class RecipeItemComponent {
    
    @Input() recipeId: number;
    
    onItemSelect() : void {
        this.router.navigate(['mealplanner','recipes',recipeId]);
    }
}

Please note: I will have to use only named outlets since I have to add a shopping list to this screen later.

Thank you for your time, and stay safe!

Answer 1

Did you provide the router outlet tag in RecipesComponent HTML?

<router-outlet></router-outlet>

Answer 2

I fixed this issue. As Mohammed Babaei suggested, in recipes.component.html, I added <router-outlet></router-outlet> to get to work.