Steps to develop a sub-route specifically for a single word

Take a look at this code:

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

No matter which link you use:

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

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

http://localhost:4200/recipes/details

They will all open the RecipeDetailComponent component.

How can I configure {path:':new', component:NewRecipeComponent } so that http://localhost:4200/recipes/new opens the NewRecipeComponent instead?

angulartypescriptroutes

Answer №1

If you type in: :new or :id, Angular will recognize them as variables. If you want a STATIC path, you must exclude the :.

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

Remember that in RecipesComponent, you also have to show the children.

This can be achieved with:

<router-outlet></router-outlet>

Then when you visit http://localhost:4200/recipes/new, the NewRecipeComponent will be displayed within the RecipesComponent component

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message received: "ReferenceError: document is not defined when attempting to utilize Angular 8 NgxUsefulSwiper

The NgxUsefulSwiper library is being used in a component and works fine on the local environment. However, upon trying to access the page with the component on the development environment, the following error occurs: ReferenceError: document is not defin ...

angularspartacus-storefront

After deploying to Heroku, cal-heatmap encounters errors despite functioning correctly in a local environment

I successfully implemented a cal-heatmap instance in my Angular 2 (angular-cli) project locally, but when I deployed the project to Heroku, I encountered some errors that prevent the cal-heatmap from displaying. https://i.stack.imgur.com/8gY90.png The er ...

angularherokutypescriptangular-clical-heatmap

What is the best approach to apply type casting in an *ngFor loop for an array containing a variety of types in Angular?

I am facing a scenario where I have two objects named DeviceA and DeviceB, both belonging to the same parent class called Device. interface Device { shared: string } interface DeviceA extends Device { attributeA: string[] } interface DeviceB extends ...

angulartypescript

What is the process for transferring a Pulumi Output<T> to the container definition of a task in ECS?

When creating a generic ECS service that deals with dynamic data, it is important to note that the containerDefinition within a Task Definition must be provided as a single valid JSON document. The code snippet for this setup looks like: genericClientServi ...

jsontypescriptpulumiecs-taskdefinition

The 'propTypes' property is not found on the 'typeof TextInput' type declaration

Trying my hand at creating a react-native component using Typescript for the first time, but I ran into an issue on line 51: Property 'propTypes' does not exist on type 'typeof TextInput Couldn't find any helpful information on similar ...

javascriptreactjstypescriptreact-native

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

As part of a project, I am tasked with creating a custom thermostat app. While I initially wanted to use Ionic for this task, I encountered some difficulty in integrating the provided API into my project. The API.js file contains all the necessary function ...

javascriptxmlangulartypescriptionic-framework

Contrast the differences between arrays and inserting data into specific index positions

In this scenario, I have two arrays structured as follows: arr1=[{room_no:1,bed_no:'1A'}, {room_no:1,bed_no:'1B'}, {room_no:2,bed_no:'2A'}, {room_no:3,bed_no:'3A'}, {room_no:3,bed_no:'3B ...

javascriptarraysangulartypescript

Launching a nested route with a specific URL in Angular 5

I've set up specific routes in my application: export const ContainerRoutes: Routes = [ { path: 'container', component: containerComponent, children: [ ...FirstRoutes, ...SecondRoutes ...

angularangular-ui-router

How to Import External Libraries into Angular 2

I am attempting to import a 3rd party library called synaptic. This library is written in JavaScript and I have a .d.ts file for it. Here are the steps I have taken: npm install synaptic --save npm install @types/synaptic --save I have also added the fol ...

node.jsangularnpm

Express Routes - Issue: Attempting to modify headers after they have already been sent to the client

Hi there, I'm currently working on setting up a route for my MERN app where I need to perform two consecutive find mongoose queries. The first query involves finding an entry in the params model that matches a certain clipname and contains a field cal ...

node.jsmongodbexpressmongooseroutes

I am experiencing an issue with my Angular application where it appears blank on gh-pages and is unable to load JavaScript from Travis

After uploading an Angular app with Travis on Github pages using the gh-pages branch, I'm encountering a frustrating issue. The page is blank and there are several error messages in the console: Failed to load resource: https://hdz.github.io/runtime.j ...

angulargithubtravis-cigithub-pages

What is the best way to dynamically insert content into a PDF using pdfmake?

In my quest to dynamically generate PDFs using pdfmake, I've encountered an issue with creating dynamic rows based on data. To illustrate, here is a simplified version of the code: getDocumentDefinition(img: string, data: DataResponse, user: UserResp ...

angulartypescriptpdfmake

Encountering difficulties in generating a personalized Angular Element

Currently, I am in the process of developing a custom Component that needs to be registered to a module. Here is how it is being done: app.module.ts import { createCustomElement } from "@angular/elements"; @NgModule({ declarations: [ExtensionCompone ...

angulartypescript

Facilitate the seamless interchangeability of Angular modules

Consider two feature modules named "sql-connector" and "nosql-connector" that can be brought into the root module: ... import { SqlConnectorModule } from './sql-connector/sql-connector.module'; @NgModule({ ... imports: [ ..., SqlConnectorMod ...

angular

Angular is detecting an incorrect value in the mask

Recently, I came across the library found at and decided to create a directive utilizing it. My TypeScript code snippet: initForm() { this.form = this.fb.group({ item_number: [this.service.lpu.item_number, Validators.required], ...

angularmask

Typescript: create a type similar to keyof but with a particular value type

I have an interface called MyInterface interface MyInterface { field1: boolean, field2: MyType, field3: MyType } In this interface, I want to create a new type that contains only the keys which have values of type MyType. While I know about the key ...

typescripttypes

Converting JSON objects into TypeScript classes: A step-by-step guide

My challenge lies in converting Django responses into Angular's User array. This conversion is necessary due to variations in variable names (first_name vs firstName) and implementing specific logic within the Angular User constructor. In simple term ...

angulartypescript

Make sure that every component in create-react-app includes an import for react so that it can be properly

Currently, I am working on a TypeScript project based on create-react-app which serves as the foundation for a React component that I plan to release as a standalone package. However, when using this package externally, I need to ensure that import React ...

reactjstypescriptnpmbabeljscreate-react-app

The Sourcemap is not correctly aligning with the expected line number

Currently working with the angular2-webpack-starter technology and utilizing VSCode along with Chrome debugger. After numerous attempts, I was able to successfully set a breakpoint, but it appears that the line mapping is incorrect. The issue persists in ...

angularvisual-studio-codegoogle-chrome-devtoolswebpack-2

At what point is it appropriate for a class to incorporate an interface?

Currently working on a project and I've noticed developers using TypeScript in the following way: export class Ledger implements ILedger { LedgerID: number; CashAmmount: number; Units: number; ...

typescriptinterfaceinterface-implementation