Navigating in Angular with parameters without modifying the URL address

In a nutshell, my goal is to navigate to a page with parameters without showing them in the URL. I have two components: Component A and B. What I want to do is route to B while still needing some parameters from A. I know I can achieve this by setting a route like [/B:parameter]. The issue is that it alters the URL from localhost:4200/b to something like localhost:4200/b=?parameter. I want to keep the parameters hidden from users because: - It's not relevant to them - It may involve sensitive business logic or data. Currently, I am using a constant to store the necessary state and accessing it in B's onInit method. Although this method works effectively, I find it inelegant. There must be a better and more sophisticated approach to handle this situation. It functions well enough, but it doesn't sit right with me. How can I tackle this elegantly?

javascriptangulartypescriptroutes

Answer №1

Quick tip: Transmitting information through routes during navigation.

Insight: The data parameter can be located in the Route documentation (https://angular.io/api/router/Route)

Illustration: Within the routing module:

path: 'auth', component: AuthComponent, data: { type: 'admin' }

In the AuthComponent, you can retrieve the type data using ActivatedRoute

  constructor(
    private activatedRoute: ActivatedRoute
  ) {
    this.type = this.activatedRoute.snapshot.data.type;
  }

If you're wondering how to dynamically pass data while routing, explore: Send data through routing paths in Angular

Answer №2

If you want to modify the URL in the browser without actually triggering a navigation, you can achieve this using the following code snippet:

window.history.replaceState(undefined, '', '#newdata');

For more information, check out: https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState

However, it's important to exercise caution when using this method!

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

Prevent clicking through slides on React by disabling the Swiper feature

Is there a way to handle the global document click event (using React hook useClickAway) so that it still fires even when clicking on a slide? For example, think of a circle in the header like an avatar dropdown - when you click on it, a menu pops up. Th ...

javascriptreactjsswiper.js

What was the reason for needing to employ `toObject()` in mongoose to determine if an object contains a certain property?

From what I understand, there is no .toObect() function in JavaScript, but it is used in mongoose to convert mongoose documents into objects so that JavaScript built-in functions can be used. I sometimes struggle with when to use it. There are instances w ...

javascriptnode.jsexpressmongooseejs

Next.js experiences slowdown when initializing props on the server side

I've been working on implementing SSR with Next.js. In my code, I'm fetching JSON data and using them as initial props. Everything works fine in development mode, but when I deploy to the server, fetching only works on the client-side (when navi ...

javascriptreactjsnext.js

Attempting to integrate the Angular2 module text-mask-addon into the project

Currently, I am in the process of integrating text-mask-addons into my Angular application. You can find more information at https://github.com/text-mask/text-mask/tree/master/addons Despite attempting to follow the npm links suggestion, I am encountering ...

javascripthtmlnode.jsangularnpm

Tips for utilizing a printer to print HTML content in PHP

I've stored HTML content in a variable as shown below: $message ="<div> <table align='center'> <tr><td><h1>Tipo de Documentos Report</h1></td></tr> <tr><td>< ...

phpjavascript

Having trouble with the $.post method not loading my PHP file in my

I followed a tutorial on YouTube to copy the code, adjusted the database connection and SELECT items to fit my existing DB, but I'm struggling to get the JS file to load the PHP file. When I use Chrome's "inspect" tool, it shows that the JS file ...

javascriptphpjqueryajax

Tips for adjusting the material ui Popper width to fit the container without disabling the portal

Currently utilizing the material-ui popper library. I am trying to allow the popper to extend outside of its container in the vertical direction. To achieve this, I have set disableportal={false}. However, upon setting disableportal to false, when assign ...

javascriptreactjstypescriptmaterial-ui

Angular 8 mat-sort issue: malfunctioning sort functionality

I have successfully implemented sorting in a mat-table within an angular 8 project. While referring to the guide available at https://material.angular.io/components/sort/overview, I encountered an issue where the sorting functionality is only working for s ...

angularmat-table

Adjusting the empty image source in Vue.js that was generated dynamically

Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on ...

javascripthtmlvue.jsvuejs2vue-component

Discovering the specific p-checkbox in Angular where an event takes place

Is there a way to assign an ID to my checkbox element and retrieve it in my .ts file when the checkbox is selected? I want to pass this ID along with the true or false value that indicates if the checkbox is checked. Here's an example code snippet: &l ...

angulartypescriptprimengprimeng-checkbox

Tips for properly formatting the sort_by parameter in Cloudinary to avoid errors

Greetings to the helpful stack overflow community, I have encountered an issue with fetching images from cloudinary via a post request. Everything works fine until I include the sort_by parameter in the URL. This results in an error related to the format ...

javascriptcloudinary

What is the best way to fill in the jquery treeselect widget?

I'm struggling with populating the jquery treeselect widget using a json file or any other method. Since I am new to jquery/javascript, I'm sure I must be missing some basics. Although I have obtained the plugin from https://github.com/travist/j ...

javascriptjqueryhtmlcssjson

What is the best way to prevent images from being loaded with broken links?

Currently, I am working on a new feature that involves rendering images from servers. In the process of aligning these images, I noticed an excessive amount of white space due to loading images with broken links. https://i.stack.imgur.com/jO8BR.png Here ...

javascripthtmlangular

What is the most effective method for coding an input tag with specific restricted characters?

Introduction I have a unique idea for creating an input field of fixed length where users can fill in the gaps without modifying certain pre-filled characters. For example, I want to display "__llo w_rld!" and let users complete the missing characters. In ...

javascripthtml

Link the Angular Material Table to a basic array

Currently facing a challenge with the Angular Material table implementation. Struggling to comprehend everything... I am looking to link my AngularApp with a robot that sends me information in a "datas" array. To display my array, I utilized the following ...

arraysangulartypescriptangular-material

What is the best way to store multiple values in local storage using useState in react?

Currently, I am exploring how to utilize multiple values in the useState hook and perform CRUD operations in local storage. Here is an example of my code: const [Data,setData]=[[{ name:'luis', pass:'1234', //....... }]] // ...... ...

javascriptreactjsarraysjsonlocal-storage

How can you create a basic slideshow without relying on jQuery to cycle through images?

Imagine you have a div containing 3 images. Is there a way to build a basic slideshow that smoothly transitions between the images, showing each one for 5 seconds before moving on to the next one and eventually looping back to the first image without rely ...

javascriptjquery

What strategies can be utilized to raise the max-height from the bottom to the top?

I am facing the following coding challenge: <div id = "parent"> <div id = "button"></div> </div> There is also a dynamically generated <div id="list"></div> I have successfully implem ...

javascripthtmljquerycss

Obtain the text that is shown for an input field

My website is currently utilizing Angular Material, which is causing the text format in my type='time' input field to change. I am looking for a way to verify this text, but none of the methods I have tried give me the actual displayed text. I a ...

javascriptcssangularjsseleniumangular-material

"Let's delve into the world of dynamic variables and Javascript once

As a newcomer to JS, I've scoured countless posts for solutions, but nothing seems to work for me. The issue arises when trying to abstract the code to handle all variables rather than just explicitly expressed values. I am open to alternative method ...

javascriptajaxprototypejs