How to create a child route that takes an exact word

Here is the code:

{path : 'recipes', component:RecipesComponent, children:[
    {path:':id', component:RecipeDetailComponent},
    {path:':new', component:NewRecipeComponent }
  ]},

Whatever link as :

http://localhost:4200/recipes/new, or

http://localhost:4200/recipes/12, or

http://localhost:4200/recipes/details

They all open the RecipeDetailComponent component.

How do i set {path:’:new’, component:NewRecipeComponent } so that http://localhost:4200/recipes/new opens NewRecipeComponent component?

>Solution :

If you write: :new or :id, angular will interpet them as variable.
If you desire a FIXED path, you need to remove the :.

{path : 'recipes', component:RecipesComponent, children:[
    {path:'new', component: NewRecipeComponent }
    {path:':id', component: RecipeDetailComponent},
  ]},

Don’t forget that in RecipesComponent, you need also to display the children.

It’s done with:

<router-outlet></router-outlet>

Then http://localhost:4200/recipes/new opens NewRecipeComponent component inside the component RecipesComponent