To properly display a URL on a webpage using Angular, it is necessary to decode

After my console.log in Angular 5 service call to the component, I can see the correct data URL being displayed

http://localhost:4200/inquiry?UserID=645

However, when it is inside an Angular for loop in the HTML template, it displays

http://localhost:4200/inquiry%3FUserID%3D645

At the very least, I need the ? to remain intact for routing purposes.

I am looking for a way to decode URLs. How can I achieve this in the component TypeScript or within the HTML template using ngFor loop and possibly a pipe?

angulartypescriptangular-routingangular-router

Answer №1

Using template only:

<div *ngFor="let user of users" routerLink="/inquiry" [queryParams]="{ UserID: user.id }">user.name</div>

Combining template and component:

<div *ngFor="let user of users" (click)="navigateTo(user.id)">user.name</div>

navigateTo(id: number) {
  this.router.navigateByUrl('http://localhost:4200/inquiry?UserID='+id);
}

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

Exploring the functionality of CanDeactiveGuard and ModalDialogService through unit testing

In my application, the CanDeactiveGuard is functioning properly. During unit testing, I encountered an issue with one test where I intended to use callThrough to invoke the openConfirmDialog() method within the Guard. This method triggers the Modal Dialog ...

angulartypescript

Facing the issue once more - Angular displaying "Http failure response for... 0 Unknown Error"

I have been researching extensively on this issue, particularly on Stack Overflow. Many of the responses point to it being a CORS problem, but I am uncertain if that is the case in my situation. Therefore, I am reaching out for help once again and would gr ...

angulartypescriptrxjsangular-httpclient

Is it true that TypeScript prohibits the presence of circular references under the condition of having generic parameters

I encountered an issue of type error in the given code snippet Type alias 'bar2' circularly references itself.ts(2456) type foo = { bars: bar[]; }; //works fine type bar = foo; type foo2<T extends Record<string, unknown> = Record< ...

typescript

Angular 2 Demonstrate Concealing and Revealing an Element

I am currently facing an issue with toggling the visibility of an element based on a boolean variable in Angular 2. Below is the code snippet for showing and hiding the div: <div *ngIf="edited==true" class="alert alert-success alert-dismissible fade i ...

typescriptangular

The directive for angular digits only may still permit certain characters to be entered

During my exploration of implementing a digits-only directive, I came across a solution similar to my own on the internet: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appOnlyDigits]' ...

angulartypescript

TypeScript is unaware that a component receives a necessary prop from a Higher Order Component (HOC)

My component export is wrapped with a higher-order component (HOC) that adds a required prop to it, but TypeScript seems unaware that this prop has already been added by the HOC. Here's the Component: import * as React from "react"; import { withTex ...

javascriptreactjstypescripthigh-order-component

Struggling to access localhost in the browser despite receiving confirmation in the terminal that it is listening on localhost

After successfully creating a new app using angular cli, I launched the server and received the message in the terminal that it is listening on localhost:4200. Please see the image at this . However, when I try to access localhost, I receive an error mess ...

angularnpmwindows-7angular-cli

Arranging an array containing three elements

As I work on my angular app, I have come across the following array: [ { "Name": "Jack", "IncomingTime": "2020-06-19T11:02+00:00", "Outgoingtime": "2020-06-19T11:07+00:00" ...

javascriptangulartypescriptangular8

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

When I select a checkbox for any section and then click the submit button, I want to display the details of that section in the console. Can someone assist me with this? **Stackblitz link:** : https://stackblitz.com/edit/angular-q7y8k1?file=src%2Fapp%2Fa ...

javascriptangulartypescript

The ngOnChanges method fails to exhibit the anticipated modifications in a variable

Trying to grasp the concept of the ngOnChanges() callback, I created an example below. Despite having values for the attributes title and content in the Post interface during compile time, I do not see any logs from ngOnChanges. Please advise on the corre ...

javascriptangulartypescriptngonchanges

Getting an error message like "npm ERR! code ENOTFOUND" when trying to install Angular CLI using the command "

Currently, I am eager to learn Angular and have already installed Node version 18.13.0. However, when attempting to install Angular CLI using the command npm install -g @angular/cli, I encountered an issue: npm ERR! code ENOTFOUND' 'npm ERR! sys ...

javascriptnode.jsangularfrontendcrud

Include form data into an array of objects within an Angular data source

I am struggling to add the edited form data from edit-customers-dialog.ts into an array of objects in my datasource. The form.data.value is returning correctly, but I'm facing issues with inserting it properly into the array. As a beginner in Angular ...

javascriptangulartypescriptangular-materialangular-reactive-forms

Encountering a problem with Firebase file uploading when using the "express-fileupload" library

Attempting to upload files using "firebase-admin" in combination with "express-fileupload". All Firebase and express-fileupload configurations have been properly set up: My required libraries: const firebaseAdmin = require("fireba ...

node.jsangularexpressfile-uploadfirebase-admin

Setting up ReactJS and TypeScript in a fresh MVC5 project from scratch

After extensively trying out various tutorials, I have yet to successfully run a basic MVC5 project using TypeScript and ReactJS. For reference, I have created these projects from scratch in Visual Studio 2015 with .NET 4.6.1, using the ASP.NET Web Applic ...

asp.netasp.net-mvcreactjstypescriptnpm

Facing Issues with HTTP Headers in Express or Node?

I have developed an Express/NodeJS REST API that includes setting a custom header on the response: router.route("/api/articles") .get(authCheck, function (req, res) { let pagination = req.get('Pagination').split(","); let cur ...

node.jsangularexpress

The Enum object in TypeScript has not been declared or defined

For my TypeScript application, I am utilizing WebPack to transpile and bundle the code. The final result is intended to be used in a pure JavaScript website. One of the components in my application is an enum defined as follows: export const enum ShapeTyp ...

javascripttypescriptwebpack

There was a mistake: _v.context.$implicit.toggle cannot be used as a function

Exploring a basic recursive Treeview feature in angular4 with the code provided below. However, encountering an error when trying to expand the child view using toggle(). Encountering this exception error: ERROR TypeError: _v.context.$implicit.toggle i ...

javascriptangulartypescriptangular5

NodeJS can be used to convert JSON data into an XLSX file format and allow for

I am currently working on a project in nodejs where I need to convert JSON data into XLSX format and then download it to the client's browser. I have been using the XLSX npm module to successfully convert the JSON data into a Workbook, however, I am f ...

node.jstypescriptexpressxlsx

Retrieving data using ngxs selector for displaying nested JSON data

My issue is related to the user object that contains nested arrays, making it difficult to access secondary arrays. I have created selectors with ngxs to retrieve and utilize data in HTML code, but extracting secondary arrays seems impossible. { "us ...

angulartypescriptngxs

Encountering an "Undefined property" error in Angular when trying to read a property, even though the json-p

manager.ts export interface Manager { id: number; name: string; employees: Array<Employee>; } employee.ts export interface Employee { id: number; fullName: string; } managers.component.ts export class ManagersComponent implem ...

angulartypescript