Scribd
Upload
34 views2 pages

Adding Child Routing Together

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
34 views2 pages

Adding Child Routing Together

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
You are on page 1/ 2

Adding Child Routing Together

1. in app-routing.module.ts
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 http://localhost:4200/recipes/ nothing...

2. Create a recipe-start component from recipes Folder


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

Then in recipe-start.component.html

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

3. Load the RecipeStartComponent in app-routing.module.ts

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

Then import
import { RecipeStartComponent } from './recipes/recipe-start/recipe-
start.component';

4. in recipes.component.html
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-
detail.component';

ERROR MESSAGE
core.js:4352 ERROR TypeError: Cannot read property 'name' of undefined at
RecipeDetailComponent_Template (

You might also like