Encountering issues when passing a string as query parameters

How can I successfully pass a string value along with navigation from one component to another using query parameters?

Component1:
 stringData = "Hello";
 this.router.navigate(['component2'], { queryParams:  stringData });

Component2:

ngOnInit() {

  this.route.queryParams.subscribe(params => {
    console.log(params)
  })
}

The console output I get in component2 is:-
{
"0": "H",
"1": "E",
"2": "L",
"3": "L",
"4": "O",
}

In the browser after navigation, I can see 
domain.com/child20=H&1=E&2=L&3=L&4=O. Why is it not passing as a complete string?
javascriptangulartypescript

Answer №1

To send your string as query parameters, you can use the following code:

this.router.navigate(['page2'], { queryParams:  { data: stringData }});

Then, in your page component, retrieve the value like this:

this.route.queryParams.subscribe(params => {
    console.log(params.data)
})

The queryParams function expects an object to be passed as an argument.

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

Fetching requests always seem to remain unfinished

I previously had this code in a different question, but since they are not unrelated, I decided to move it to a new one... Here I am again with the same code, but facing a different issue. My application is set up and running on an express server with a p ...

javascriptvue.jsproxyvuejs3

Iterate over JSON dates in JavaScript

Trying to utilize JavaScript in looping through a JSON file containing time periods (start date/time and end date/time) to determine if the current date/time falls within any of these periods. The provided code doesn't seem to be working as expected. ...

javascripthtmljson

How can we exclude fields from JSON.stringify in type-graphql entities?

Utilizing https://github.com/MichalLytek/type-graphql for crafting our graphql schema has posed a challenge. When we serialize the TypeScript entity object, it does not adhere to the field annotations in our GQL entities, resulting in unwanted data leakage ...

node.jstypescriptgraphqlapollo-server

.net 6 Attribute routes resulting in a 404 error response

Last week I had a similar question, but now I'm facing an issue with a different controller. I'm baffled as to why I keep getting a 404 error. API Controller... [Route("api/[controller]")] [ApiController] public class FilesController { ...

c#.netangularasp.net-core

Ensuring the selected date matches any consecutive dates within the dates array in Angular

Imagine if 01/01/2022 is chosen from the input field, and my array of dates looks something like this: ['31/12/2021', '01/11/2021', '02/01/2022'...] In this scenario, when '31/12/2021' and '02/01/2022' are ...

htmlangulartypescriptvalidation

Issue encountered with JavaScript AJAX involving a Cross Domain ASMX Web Service JSONP Request

I have been working on a local web service that I believe fits the criteria for making cross-domain JavaScript calls to access external data within Dynamics CRM. However, I am facing some challenges in creating the JavaScript AJAX code needed to connect wi ...

javascriptajaxwebservicecross-domain

Updating Google+ url parameter dynamically without the need to reload the page

Is there a way for a user to share a link on social media platforms like Facebook and Google+ without having to refresh the page? The user can customize the link with an ajax call, ensuring that the page remains static. Here is my code for the Google Plu ...

javascriptjqueryajaxsymfonygoogle-plus

ScriptManager.RegisterClientScriptBlock is failing to execute the already existing script

Background When a client-side button click triggers a server-side function, a loading panel (div) is displayed before the server-side function is executed. The loading panel should be removed once the server-side function completes. My Approach Upon com ...

javascriptc#asp.netscriptmanager

The data from Angular2 Observable Subscription appears undefined, although a closer look at the Browser Debug reveals otherwise

Is it possible there is an issue with the data subscription process? Upon subscribing to data from a service call, 'undefined' is returned as the data set. Surprisingly, when I debug the code in the browser, it clearly shows that the correct dat ...

angulartypescriptobservablesubscription

Use the JavaScript executor to combine a dynamic string

I have a String variable that retrieves IDs from an Excel sheet. String id = formatter.formatCellValue(sheet.getRow(i).getCell(2)); I am trying to dynamically update the ID using JavaScript executor, but it seems that the concatenation is not working cor ...

javascriptjavaselenium

Node and Angular Error: The specified file or directory does not exist

I have been using the tutorial from scotch.io to build my first node and angular application. I encountered a common issue with relative paths online resulting in the error message Error: ENOENT: no such file or directory. However, after following the tuto ...

javascriptangularjsnode.js

Is it possible to embed an array within an object by utilizing the name attribute in a form?

I am currently developing a full-stack application where I have a form that submits data to one of my post routes. In this form, all input fields are grouped into req.body.model. This is made possible by adding a name attribute with square brackets around ...

javascriptnode.jsexpress

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

I am experimenting with a unique combination of a Pure CSS in-page anchoring solution using scroll-behavior: smooth and scroll-margin-top settings, along with a sticky header for in-page navigation. By utilizing IntersectionObserver, I can identify when t ...

javascripthtmlcssintersection-observerscroll-margin-top

The Bootstrap validator triggers the form submission only after the second click

When I click on the submit button, I am attempting to submit a form that has its default action prevented and first checks a condition before proceeding. Below is the code snippet: $('#payment-form').bootstrapValidator({ live: 'dis ...

javascriptjqueryformstwitter-bootstrapbootstrapvalidator

Navigating back to the original page after venturing to a different one - react

In the header of each page, there is a 'Back' button that allows users to navigate back to the previous page. The function handleGoBack() is responsible for this: import React from 'react'; import { Button, Typography } from "@mate ...

javascriptreactjs

What is the process for uploading a file and storing it in a specific directory?

Creating HTML Form for File Upload: <div style="width:200px"> <form action="javascript:_bulkUser();" method="post" enctype="multipart/form-data"> Select File:<input type="file" name="fname"/><br/> <input type="submit ...

javascriptjqueryfile-upload

Mastering Typecasting in TypeScript: A comprehensive guide

I have a loadMore function that retrieves data and returns a Promise of either Project[] or Folder[] or undefined. const items = await loadMore(); How can I specifically cast the type of 'items' to Folder[] in TypeScript? ...

typescript

Fetching data from the server using Angular and parsing it as JSON

Can anyone provide some insight on the best way to use jsonObjects in ng repeat? Here is my code: This is the response I get from PHP: die(json_encode(array('sts'=>'success', 'title'=>'*****', 'msg' ...

javascriptphpangularjsjson

Sending a PHP variable to a JavaScript function

When attempting to pass a value to a JavaScript function by clicking a link, I encountered an error message: Uncaught SyntaxError: Unexpected identifier The following is the code snippet: <?php include_once("php_includes/check_login_status.php") ...

phpjavascripthtml

Ways to retrieve data from a URL and pass it to JavaScript code

I am currently experiencing difficulties in obtaining the values from an object requested through a link on my website. The issue arises from the fact that I have created a PHP method to retrieve data from the database for the values of a particular objec ...

javascriptphphtmljqueryajax