Utilize Angular 5 to implement URL routing by clicking a button, while also preserving the querystring parameters within the URL

I have a link that looks like this

http://localhost:4200/cr/hearings?UserID=61644&AppID=15&AppGroupID=118&SelectedCaseID=13585783&SelectedRoleID=0

The router module is set up to display content based on the above URL structure 

{ path: 'criminal/hearings', component: HearingsComponent, pathMatch: 'full'},

Now I want to ensure that the querystring is maintained when a button is clicked.

Button HTML:

<button type="button" (click)="addHearing()" class="btn btn-primary">Add Hearing</button>

Corresponding TypeScript function:

addHearing(){
    this.router.navigate(['/cr/edithearings']) // How can I include the querystring???
}

I need to incorporate the existing querystring into the button click event so that it navigates to the correct route while keeping the querystring intact

{ path: 'criminal/edithearings', component: HearingEditComponent, pathMatch: 'full'},

http://localhost:4200/criminal/edithearings?HOW_to_add?

javascriptangulartypescriptroutesangular-routing

Answer №1

If you're using an HTML template to navigate, remember to include preserveQueryParams="true"

It's important to note that preserveQueryParams should not have square brackets around it.

For example:

<a [routerLink]="['/navigate-to']" preserveQueryParams="true">

Here is an in-code example:

addHearing(){
    this.router.navigate(['somewhere'], { queryParamsHandling: "preserve" });
}

Answer №2

createNewHearing(){
    this.router.navigate(['/cr/edithearings'], { queryParams: { id: newId } })
}

The navigate function in the above code snippet includes a queryParams property that allows for passing key-value pairs, such as an ID for creating a new hearing.

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 'Module not found' occurring while utilizing dynamic import

After removing CRA and setting up webpack/babel manually, I've encountered issues with dynamic imports. The following code snippet works: import("./" + "CloudIcon" + ".svg") .then(file => { console.log(file); }) However, this snip ...

javascriptreactjstypescriptwebpackbabeljs

What is the JavaScript mouseenter/out event all about?

My goal is to create a hover effect using JavaScript. I am utilizing the mouseenter and mouseout events to display the content when the mouse hovers over a button and remove the content when the mouse moves out. However, I am facing an issue where the cont ...

javascripthtmlcssjsonajax

The value control input does not get properly updated by ngModelChange

Having difficulty updating an input as the user types. Trying to collect a code from the user that follows this format: 354e-fab4 (2 groups of 4 alphanumeric characters separated by '-'). The user should not need to type the '-', as it ...

javascriptangular

Using Javascript to remove spans that do not have an id assigned

Is there a way to identify and remove spans without ids from a string? I have a text with several spans, some with ids and some without. Input: <span>Hi there!</span><span id="blabla">This is a test</span> Output: Hi there!< ...

javascriptjquery

Create a feature in three.js that allows users to click on an object to display information about the

After loading an object using the GLTF loader into my scene, I want to create a point on this object to display popup info. Is there a way to add a point to a specific location on the object? ...

javascriptanimationthree.js3d

Steps to send an asynchronous AJAX request to the server-side within the JQuery validation plugin using the addMethod() function

Currently, I am in the process of developing my own framework using the JQuery validation plugin to validate CRUD forms both client-side and server-side. It is crucial that these forms are not static but rather created dynamically using "handlebar.js". Fo ...

javascriptjqueryajaxvalidationjquery-validate

The LoaderRunner callback was triggered by the bootstrap version ^3.4.1 before

I encountered a surprising error while using the Azure Build pipeline, specifically in the loadrunner.js file. The error message from the pipeline is: "The callback was already called". C:\Windows\system32\cmd.exe /D /S /C ""C:&bso ...

node.jsangularnpmbootstrap-5loadrunner

Tips for integrating angular signature functionality using fabricjs in the latest version of Angular (Angular 11)

After struggling to make paperjs and the angular-signature library work together, I was at my wit's end. But then, I stumbled upon a different solution that proved to be much better. I realized that posting the solution under the appropriate question ...

javascriptangularfabricjsimplementationsignature

The SharedArrayBuffer does not exist in this context

A new library, react-canvas, has been causing some trouble for me. Lately, an error message keeps appearing with the <p> tag in the canvas area where it should be displayed on browsers like Chrome. The framework I'm using is nextjs, and I&apos ...

javascriptreactjswebpacknext.js

Adding parameters to a URL is a common practice

"Adding additional information to a URL that was previously included?" I apologize for the confusing title, but I can't find a better way to phrase it. Perhaps an example will make things clearer. Let's say I have URL 1: http://example.com/?v ...

phpjavascriptquery-string

Encountering an undefined response in API call using Fetch with Express Nuxt

I've hit a roadblock with a task involving Express, API, and Fetch. I'm utilizing Nuxt along with Shopify API endpoints to retrieve data such as orders. Below is my express API Endpoint which should return an array of objects (orders). const bod ...

javascriptapiexpressnuxt.js

The <h> tag gains height on its own accord

Here is my original code: <h4 class="orange2" ><a href="<?php echo base_url();?>v/<?php echo $this->uri->segment(3);?>/<?php echo $v['uniq'];?>"><?php echo trim(strip_tags($v['video_name']));?> ...

javascriptcsshtmltwitter-bootstrap

Is there a solution available for the error message that reads: "TypeError: Cannot set value to a read-only property 'map' of object '#<QueryCursor>'"?

Everything was running smoothly in my local environment, but once I deployed it on a Digital Ocean Kubernetes server, an error popped up. Any assistance would be greatly appreciated. https://i.stack.imgur.com/VxIXr.png ...

node.jstypescriptexpresskubernetesmongoose

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

My current task involves inserting radio button values into a MySql database using Angular. The form consists of radio buttons with predefined values stored in a json file. Below is an example of how the json file is structured: //data.json [{ "surve ...

javascripthtmljsonangulartypescript

What is the best way to assign the value of a specific key in one array as the key in a different array?

I am attempting to retrieve the value feature_1 associated with the key name from the array data. I then aim to set feature_1 as the key of another array asset, with an array as its corresponding value. For example: //input: data: { name: "feature_1" ...

javascriptarraysjson

Displaying live, real-time information using ng-apexcharts

Is there a way to leverage the results of this loop: <div *ngFor="let hour of hours | async">{{ hour.messages }}</div> and incorporate it into the [series] of an Apex Chart? An attempt like this: <apx-chart *ngFor="let hour of hours | asyn ...

angularangularfire2apexcharts

Finding the parent div in the handleChange function using React

I am facing a challenge with multiple dynamic divs, as their number depends on the filter selected by the visitor. This makes it impossible to use getElementById in this scenario. My goal is to modify the parent div's CSS when an input is checked. B ...

javascriptreactjstailwind-css

Having trouble adjusting the color on Material UI select in ReactJS?

Here is the code snippet I am working with: const useStyles = makeStyles({ select: { '&:before': { borderColor: 'white', }, '&:after': { borderColor: 'white&apos ...

javascriptreactjsmaterial-ui

Ways to verify whether an array contains any of the specified objects and then store all those objects in Supabase

Perhaps the title of my question is not very clear, but I find it difficult to summarize in just one line. To provide context, it would be best to see the JavaScript query I'm making for Supabase and its response. The data: [ { title: 'Th ...

javascriptreactjspostgresqlsupabasesupabase-js

Appear and disappear div

I am seeking to achieve a specific goal: I want to fade in a div with text after a certain number of seconds, then fade it out. I also want to repeat this process for 4 other divs, ensuring that they do not interfere with each other by appearing while the ...

javascriptjqueryhtml