Navigate using an abstract data type

I am looking to transmit abstract data (In Angular 4 or 5) from one component to another without it being visible in the url. Currently, I am using the following method:

let navigationExtras: NavigationExtras = {
    queryParams: {
      "firstname": "Nic",
      "lastname": "Raboy"
    }
};

this.router.navigate(['home-aluno/'+change.matricula], navigationExtras);

However, the presence of "Nic" and "Raboy" in the url is not ideal for my requirements.

Here is an example of the current url:

http://localhost:4200/home-aluno/001?firstname=Nic&lastname=Raboy

I am seeking a solution to send and receive the data in the other component (through navigation) without it being displayed in the url. Is there a way to achieve this using routes?

angulartypescript

Answer №1

To effectively transmit information along a route without displaying it in the Url, utilizing a service is recommended.

You could create a basic service like the following:

import { Injectable } from '@angular/core';

@Injectable() 
export class DataService {
  serviceData: string; 
}

The initial component can input the value into the service, while the second component can retrieve the value from the service. This method is frequently used for data exchange.

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

Unable to log in with password after hashing using React, NodeJS, and mySQL

I've implemented a salt and hash function to secure my password. Strange thing is, I can't log in using the original password, but it works when I use the hashed password from the database. Salt: "HashedPasswordCheck" Hash Function: function has ...

mysqlnode.jsreactjstypescriptredux

Executing a Function in a Service from a Component in Angular/TypeScript and Receiving a Return Value

I need guidance on how to effectively utilize the "getUserDocInfo()" function from a separate service within my component. How can I call this function and then leverage the data it returns for further operations? Component Example getToken(){ this. ...

angulartypescriptgoogle-cloud-firestoreangularfire5

Error message: Typescript and Styled-Component conflict: GlobalStylesProps does not share any properties with type { theme?: DefaultTheme | undefined; }

I've encountered an issue while passing props inside GlobalStyles in the preview.js file of my storybook. The props successfully remove the background from the default theme, but I'm receiving an error from Typescript: The error message states " ...

reactjstypescriptnext.jsstyled-componentsstorybook

Error message: The function URL.createObjectURL is not recognized in this context | Issue with Antd charts

Currently, I am working on integrating charts from antd into my TypeScript application. Everything runs smoothly on localhost, but as soon as I push it to GitHub, one of the tests fails: FAIL src/App.test.tsx ● Test suite failed to run TypeError: ...

reactjstypescriptchartsantdcreateobject

Is the validator in my Angular reactive form malfunctioning?

I have been working on a service where I'm trying to validate the zip code field, but for some reason, the logic (result ? null : { IsInvalid: true }) is not executing. It makes me wonder if there's an issue with the reactive form or if I am usin ...

angularvalidationasynchronousangular-reactive-forms

Unable to trigger dispatchEvent on an input element for the Tab key in Angular 5

In my pursuit of a solution to move from one input to another on the press of the Enter key, I came across various posts suggesting custom directives. However, I prefer a solution that works without having to implement a directive on every component. My a ...

javascriptangulartypescript

Capturing user input with Angular Material forms in HTML

In the process of working on a project in Angular, I am utilizing the Angular Material component library. As part of this project, I am creating a form with multiple fields. Everything is functioning properly, however, the layout appears slightly off: ht ...

htmlangulartypescriptangular-material

Steer clear of encapsulating components or modifying the attributes of the encapsulating element

I am currently developing an application that involves dynamically adding components. One of the key components is a block component with the following template: <div id="{{element.id}}" class="row" [hidden]="hide"> ...

angular

Image control failing to display SVG file

I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar. Here i ...

htmlcssangulartwitter-bootstrapsvg

Sharing Pictures and Messages using angular, express, and multer

Struggling with posting images and text to the server while self-learning Angular. The backend works fine in Postman testing, but fails when working with Angular. Here is the code snippet I have been using: upload.component.html <form [formGroup]="upl ...

node.jsangularexpressform-data

When attempting to redirect to the home page in Angular 6, the page successfully redirects but fails to load properly

I am new to using angular. Recently, I converted a large project from html/css/php/js to twig/slim, and switched the hosting platform from apache2/sql to s3 buckets/lambda apis. While I have successfully converted smaller projects to angular without any i ...

angularangular6angular-routerangular-module

What is the most effective way to transform values into different values using TypeScript?

If I have a list of country codes and I want to display the corresponding country names in my component, how can I achieve this using props? interface MyComponentProps { countryCode: 'en' | 'de' | 'fr'; } const MyComponent: ...

javascriptreactjstypescript

The conversion to ObjectId was unsuccessful for the user ID

I'm looking to develop a feature where every time a user creates a new thread post, it will be linked to the User model by adding the newly created thread's ID to the threads array of the user. However, I'm running into an issue when trying ...

typescriptexpressnext.jsmongoose-schemaobjectid

A TypeScript class that is a concrete implementation of a generic type

When handling a login operation, I receive an HTTP response like this: interface ILoginResponse { // ok message: string token: string; } This response structure is part of a generic response format that I intend to use for all my HTTP responses: i ...

typescript

Exploring the intricacies of the let and const modifiers in ngFor loops

I encountered some unexpected behavior with the const keyword while using it in an Angular 2 *ngFor loop. Let's consider the following base code: interface Foo { name: string; list: string[]; } @Component({ ... }) class FooComponent() { ...

angulartypescript

Using TypeScript to create a state object in Koa

I am currently utilizing Koa () as the framework for my backend, which consists of Node.js + TypeScript. Koa permits and recommends using the built-in `ctx.state` to store and pass data between different middleware functions. I have been adhering to this ...

typescriptkoa

Retrieve the selected rows in AG grid based on their group index

Important: The data in the grid is organized into groups. I am attempting to retrieve selected rows at a specific group index. I have attempted using the getDisplayedRowAtIndex(index).allLeafChildren method and looping through each node to find those tha ...

angularag-grid

Tips for anticipating a string that begins with a particular variable

One of the challenges I'm facing involves a simple function that creates a string from a complex object. To illustrate, consider the following implementation: public generateMessage(property: string): string { return `${property} more text.`; } ...

typescriptjestjs

Is it possible to transfer the security measures from Angular 6 to Angular 9?

Is it necessary to update my Angular project from version 6 to 7 before moving on to the latest version, or can I upgrade directly to the most recent version of Angular? ...

angular

Simplify the cognitive load of the function

I'm facing a challenge with a function that has a cognitive complexity of 24, however, we have a requirement to limit it to a maximum of 15. export function parameterValueParser<T extends Structure>( structure: T ): (parameterValue: Value) =&g ...

javascripttypescript