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

Tips for automatically refreshing a page after submitting a form

I have a template with two components - a filter and a request to the API. I am wondering if it's possible to update the values of the request component after submitting the filter. On the main page, the request component has default values. When a u ...

javascriptvue.js

Is the jquery autocomeplete plugin malfunctioning when using numbers in the input?

I encountered a requirement to display stock number suggestions within a search box. To achieve this, I decided to implement the Jquery autocomplete plugin. Through an ajax call to a function in my cfc, I was able to retrieve all the stock numbers and stor ...

javascriptjquery

Utilizing AngularJS within a Captive Network Assistant (WISPr) on iOS and MacOS devices

In my past experiences with projects, it has been observed that Apple's Captive Network Assistant (also known as WISPr client) operates with a restricted browser. For further information, you can refer to How can I debug the browser in Captive Portal? ...

javascriptiosangularjscaptivenetworkwispr

the router is having trouble choosing the right function

When attempting to log in a user using postman with the URL http://localhost:3000/login, it seems to always trigger the register function instead. The code itself is working fine, but it's just routing to the wrong function. How can I redirect it to t ...

javascriptnode.jsexpressroutes

Tips for showcasing an array containing two different types of objects in Angular

After sending a request to a remote server, I am returned with a JSON array. However, the array can contain two different types of JSON objects: [ { "country": "USA", "caseCount": 561, "caseDates": [], ...

angulartypescript

When an Ajax post request is made, the data being sent is appended to the JSON response

Having a dilemma with my ajax call: $.ajax({ url: '/assets/functions.php', type: 'POST', data: { "functionCall": "get-uploads", "type": type }, dataType: 'json', success: function (data ...

javascriptphparraysjsonajax

Tips for automatically verifying coupons and adjusting prices

My current task involves implementing a coupon feature on the checkout page using an AJAX request to validate the coupon and adjust the price accordingly. However, when the checkout view is loaded, I encounter an error message: The first argument in the ...

javascriptruby-on-railsrubyajaxruby-on-rails-4

Combining JSON fields and searching based on the combined value within MarkLogic

In the JSON format provided below, I have stored a person's first name and last name along with their nickname. { "Person": { "Records": [ { "nameType": "Primary", "firstName": "Sagar", "lastName" ...

javascriptjsonsearchmarklogic

Implementing a feature in ReactJS that enables users to select a minimum and maximum limit for checkboxes

I have developed a unique React application that incorporates JSON values into checkbox elements. The JSON data includes both minimum and maximum required values. I successfully implemented a function to set the checkboxes' maximum value based on the ...

javascriptreactjscheckboxecmascript-6radio-button

Attempting to create a TypeScript + React component that can accept multiple types of props, but running into the issue where only the common prop is accessible

I am looking to create a component named Foo that can accept two different sets of props: Foo({a: 'a'}) Foo({a: 'a', b: 'b', c:'c'}) The prop {a: 'a'} is mandatory. These scenarios should be considered i ...

javascriptreactjstypescript

Assistance needed with sending JSON data to a PHP server using the POST method

I am attempting to transfer JSON data from an HTML form to a PHP server using the POST method. The issue I am encountering is that my code always ends up in the fail block within the callback function. Despite this, the Firebug console (ctrl+shift+J) does ...

phpjavascriptajaxjson

Executing the Angular 2 foreach loop before the array is modified by another function

Currently, I am facing some difficulties with an array that requires alteration and re-use within a foreach loop. Below is a snippet of the code: this.selectedDepartementen.forEach(element => { this.DepID = element.ID; if (this.USERSDepIDs. ...

javascriptangulartypescriptasynchronous

The handlebar does not undergo any modifications once the authentication process is completed

This file is named header.hbs <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>{{ title }}</title> ...

javascriptnode.jsexpress

How can Angular provide a visual indication when a component change occurs?

Facing a dilemma as an Angular beginner... Imagine having an application that displays the most recent price of AAPL stock. You have a component where this price is received. Each time you request data from the API, a new price is retrieved and passed to ...

angularangular-changedetection

Error NG0303: Unable to connect to X because it is not recognized as a property of Y

Recently, I made the switch to Angular 17 in my application The error I'm encountering seems to only occur when running the test command ng test Everything works fine with building and executing the application, it has been deployed to production wi ...

angularjasmine

There is no Api.js file in the Cordova iOS platform

I have been attempting to integrate the iOS platform into a new Cordova 7.0.1 project, but I continuously encounter the error mentioned in the title of this post. Despite following the steps outlined in this thread here, including removing and re-adding ...

javascriptiosnode.jscordovanpm

Replace the ngOnDestroy method

Is there a way to complete an observable when the ngOnDestroy is triggered? I'd prefer not to create new child components when dealing with just one component instance. I attempted to override ngOnDestroy by modifying the function in the component&apo ...

javascriptangular

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

javascriptjqueryhtmldom

Leveraging the power of Angular to send the contents of a div via email

I have a div element with a specific class name and I am currently exploring ways to extract the rendered components of that div as text in order to include it in the body of an email. I have tried various methods such as using classes and ng-model, but so ...

javascripthtmlangularjsemail

When the page is reloaded, establish the default value for the dropdown in Angular 9

My HTML file includes the use of p-dropdown: <p-dropdown id="userType" name="userType" inputId="userType" formControlName="userType" [required]="true" [tabindex]="1" optionLabe ...

angularangular-reactive-formsangular9angular10