Can multiple parameters be passed in a routing URL within Angular 11?

app-routing.module.ts
{ path: 'projectmodel/:projectmodelname/salespack', component: componentname}

When navigating using a button click, I want the URL to be structured in the following way: I attempted to achieve this by using the following code:

this.router.navigate(['/projectmodel', this.salesPackName, '/salespack'])
this.salesPackName = this.route.snapshot.paramMap.get('projectmodelname');

However, I encountered a 'page not found' error, indicating that the URL I provided was incorrect. As a newcomer to Angular, I am unsure where I have made a mistake. Any assistance would be greatly appreciated.

angulartypescript

Answer №1

There is no necessity for using the slashes in this case.

Have you attempted the following:

this.router.navigate(['projectmodel', this.salesPackName, 'salespack'])

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

Exploring Angular 4: Understanding the nuances between search and params when using http get with parameters

When working with Angular 4's HTTP package ('@angular/http'), there is an option to pass a URLSearchParams object in the get request. What sets apart using search versus params when assigning the parameters object in the request method? For ...

angular

Tips for transferring information from Angular 6 to Node.js

Having recently delved into Angular 6 for the first time, I find myself tasked with sending data to a Node.js server. The code snippet below illustrates my approach within an Angular function: import { Component, OnInit } from '@angular/core'; ...

htmlnode.jsangularangular6

Refreshing the private route redirects the user to the login page

Currently, I am working on setting up a private route within my React app. I have integrated Redux and Redux-Toolkit (RTK) Query for handling state management and data fetching. The issue I am facing is that whenever I reload the private page, it redirects ...

reactjstypescriptreduxreact-router-domredux-toolkit

ngx-datatable Retrieve the most recent clicked row using multi-click mode

Currently, I am attempting to retrieve the most recent 'clicked' row from ngx-datatable. Here is what I have in my code: <ngx-datatable [rows]="rows" [selected]="selected" [selectionType]="'multiClick'" (select)='on ...

angulartypescriptngx-datatable

Angular is unable to bind with 'dragula' because it does not recognize it as a valid property of 'ul'

I've been attempting to incorporate dragula into my Angular 2 application, but I'm struggling to get it functioning. This is what I have added in my app.module.ts file: import { DragulaModule, DragulaService } from 'ng2-dragula/ng2-dragula ...

javascriptangularnpmwebpackng2-dragula

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

The type '{}' does not contain a property named 'map'

Recently delving into TypeScript, and I'm curious about the process of typing an axios response when storing it in a state variable. I've initiated a basic API call from App.tsx, which returns the following object: {data: {…}, status: 200, s ...

reactjstypescript

When the local server and SPA are running on different ports, utilizing an authentication cookie can help bridge the

I currently have a nest.js webserver running on localhost:3000, with an angular frontend served to localhost:4200 (using the dev server). These ports are set as defaults. My authentication process involves sending an access-token in a cookie to the front ...

node.jsangularexpressnestjs

The navigation underline stays in place even after being clicked, and also appears below

Take a look at this js fiddle I've managed to create the underline effect on the navigation links when the user hovers over them. However, the underline only stays visible until the user clicks elsewhere on the screen. How can I make it persist as l ...

javascripthtmlcsstwitter-bootstrapangular

A guide on incorporating and utilizing third-party Cordova plugins in Ionic 5

Attempting to implement this plugin in my Ionic 5 application: https://www.npmjs.com/package/cordova-plugin-k-nfc-acr122u I have added the plugin using cordova plugin add cordova-plugin-k-nfc-acr122u but I am unsure of how to use it. The plugin declares: ...

javascripttypescriptionic-frameworkionic-plugins

What criteria does Angular use to determine when the aot compiler should be utilized?

This page discusses the concept of modules in Angular and explains the two approaches to bootstrapping - dynamic and static. The configuration for these approaches is typically found in main.ts: // Using the browser platform with a compiler import { platf ...

javascriptangular

Best practices for safely handling dynamic keys in Typescript

I am searching for a secure method to create keyed objects in this manner: interface Types { RED: 'RED'; BLUE: 'BLUE'; GREEN: 'GREEN'; } type TypeKeys = keyof Types; const COLORS: Types = { RED: 'RED', B ...

reactjstypescriptobjectkeytype-safety

Getting around relative paths in an Angular application hosted by NGINX

I am using NGINX to host my Angular application. The frontend is accessible at http://localhost/, and the backend can be accessed at http://localhost/api/. While most of my configuration works correctly, I am encountering an issue with a relative path in a ...

angularnginx

What is the best way to showcase 10 data points from a list of 100 in an Angular datatable?

Is there a way to display the first 10 values from a list of 100 using Angular DataTable? <tr *ngFor="let i of arr"> <td>{{i}}</td> </tr> ...

angular

Using Jasmine to Jest: Mocking Nested function calls

I am currently working on testing my TypeScript functions with Jasmine: //AB.ts export async function A() { } export async function B() { A(); } My goal is to unit test function B by mocking out function A to see if it is called. Here is the code I h ...

typescriptunit-testingjasminespyon

Breaking down CSV rows and transforming numerical data (Typescript, Javascript)

Looking to convert a row from a csv file into an array and then transform the numeric values from string format. This represents my csv file row: const row = "TEXT,2020-06-04 06:16:34.479 UTC,179,0.629323"; My objective is to create this array (with the ...

javascriptarraystypescriptcsvcsvtoarray

Determining the output type by considering the presence of optional parameters

function customFunction<T>(defaultValue?: T) { return defaultValue; } const definitelyNullOrUndefined = customFunction<string>(); // type: string | undefined const definitelyStringType = customFunction<string>('foobar'); // ...

typescript

Neglecting the error message for type assignment in the Typescript compiler

Presented here is a scenario I am facing: const customer = new Customer(); let customerViewModel = new CustomerLayoutViewModel(); customerViewModel = customer; Despite both Customer and CustomerLayoutViewModel being identical at the moment, there is no ...

javascripttypescripterror-handlingtsconfig

Pass the parameter name to the controller using the Change function in Angular 2

When creating a string from multiple inputs, I have a requirement to include the name of the input element as the second parameter in a function. <input [(ngModel)]="programSearched" name="programSearched"(ngModelChange)="stringBuilderOnChangeMaker(pro ...

angulartypescript

What are the advantages of utilizing @input and @output instead of subject/services?

When passing data between child and parent components in Angular, we often utilize @Input and @Output. What advantages do @Input and @Output offer over using subjects or services? Aside from being the most conventional method provided by Angular itself, is ...

angularangular-componentsangular-changedetectiondata-sharingangular-lifecycle-hooks