Scribd
Upload
17 views2 pages

Child Routing in Angular Recipes

The document discusses adding child routing to a recipes route in an Angular application. It involves: 1. Defining a child route for an empty path on the recipes route to load a RecipeStartComponent 2. Removing the recipe detail logic from the RecipesComponent and replacing it with a router-outlet 3. Adding a second child route that loads RecipeDetailComponent at the path /recipes/:id to display individual recipes

Uploaded by

Jay R Fuenzalida Valeroso
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views2 pages

Child Routing in Angular Recipes

The document discusses adding child routing to a recipes route in an Angular application. It involves: 1. Defining a child route for an empty path on the recipes route to load a RecipeStartComponent 2. Removing the recipe detail logic from the RecipesComponent and replacing it with a router-outlet 3. Adding a second child route that loads RecipeDetailComponent at the path /recipes/:id to display individual recipes

Uploaded by

Jay R Fuenzalida Valeroso
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

Adding Child Routing Together

1. in [Link]
we'll add children routes on our recpes path:
{ path: "recipes", component: RecipesComponent },

Updated Code
{
path: "recipes", component: RecipesComponent,
children: [{ path: "", component: }]
},

remarks
we want to access [Link] nothing...

2. Create a recipe-start component from recipes Folder


ng g c recipes/recipe-start --skipTests true

Then in [Link]

<h3>Please select a Recipe!</h3>

3. Load the RecipeStartComponent in [Link]

{
path: "recipes", component: RecipesComponent,
children: [{ path: "", component: RecipeStartComponent}]
},

Then import
import { RecipeStartComponent } from './recipes/recipe-start/recipe-
[Link]';

4. in [Link]
We remove the below code

<app-recipe-detail *ngIf="selectedRecipe; else infoText"


[recipe]="selectedRecipe">
</app-recipe-detail>

<ng-template #infoText>
<p>Please select a Recipe!</p>
</ng-template>

And we just replace it with router-outlet

<router-outlet></router-outlet>

Remarks: Old logic of displaying the recipe will be broken.

5. Let's load RecipeDetailComponent in our recipes Routes


Remarks
":id" dynamic segment added after the recipes
all childs routes always come after the path of the parent route

******************

{
path: "recipes", component: RecipesComponent,
children: [{ path: "", component: RecipeStartComponent },
{ path: ":id", component: RecipeDetailComponent }]
},

then import it
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-
[Link]';

ERROR MESSAGE
[Link] ERROR TypeError: Cannot read property 'name' of undefined at
RecipeDetailComponent_Template (

You might also like