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

What is the best way to access a private class variable within the sockent.on function in Angular?

export class AppComponent { title = 'my-app'; constructor(private notifyService : NotificationService) {} ngOnInit() { socket.on("laravel_database_chat:test", function(message){ //I AM ATTEMPTING TO INVOKE THE NOTIF ...

javascriptangulartypescriptsockets

Using Angular Material to dynamically hide columns in a table that is being created on the fly

Is there a way to hide columns in my table based on the ID value sent to the page upon opening it? While researching, I found a method for tables with dynamically generated columns in this post: https://github.com/angular/components/issues/9940. However, t ...

htmlangulartypescriptangular-material

Shifting Angular Component Declarations to a New Location

Here's a question that might sound silly: In my Angular project, I am looking to reorganize my component declarations by moving them from angular.module.ts to modules/modules.modules.ts. The goal is to structure my src/app directory as follows: src ...

javascriptangulartypescriptangular-componentsangular-module

Can you delve into the origin of the term Modal in the context of Angular and web development?

My understanding of a Modal is that it is a webpage component that opens separately from the main page in order to maintain continuity. Am I correct? I am curious as to why it is referred to as a Modal. Could it be short for modularity? Meaning that vari ...

angular

After updating from angular4 to angular 5, the npm test is failing with the error message "TypeScript compilation cannot find test.ts file"

After upgrading my app from Angular4 to Angular 5 using the steps provided on https://update.angular.io/, I encountered an issue. While I can successfully run ng-serve and ng build without any problems, the npm test command for ng test is failing with the ...

angulartypescriptangular-upgrade

Ways to access the value of the parent observable?

I've been exploring the concept of nesting HTTP requests using mergeMap. The API I'm working with sends data in parts, or pages, which means I have to make more requests based on the total number of pages. To determine the number of pages, I alw ...

angularrxjs

The issue of Angular 6 view failing to display accurate data upon page load

In my Angular 6 application, I've implemented a login feature using Firebase's Google login. The interface includes a button labeled Login when the user is logged out, and changes to Logout with the current email address displayed when the user i ...

javascripthtmlangular

Is it necessary to have a Test Adapter in VSTS in order to include a code coverage report?

Currently, I am producing code coverage using Karma-coverage and hosting my output coverage folder on an http-server for local viewing. My question is: How can I display this report on the VSTS code coverage tab? Do I need to re-format my coverage result ...

angularcode-coverageazure-devopsazure-pipelinesazure-devops-rest-api

React | What could be preventing the defaultValue of the input from updating?

I am working with a stateful component that makes a CEP promise to fetch data from post offices. This data is retrieved when the Zip input contains 9 characters - 8 numbers and a '-' - and returns an object with the desired information. Below is ...

node.jsreactjstypescript

Unable to set textAlign column property in Inovua React Data Grid using typescript

I am currently facing an issue with centering the content of each grid cell in Inovua RDG. A frustrating TypeScript error keeps popping up: Type '{ name: string; header: string; textAlign: string; defaultFlex: number; defaultVisible?: undefined; }&apo ...

reactjstypescripttext-alignreact-data-grid

Tips for deleting on a numeric cell within ag-grid?

While exploring the functionality of AG-Grid with the example provided at this link [, I am currently experimenting with the numeric editor feature. I found this example on the official AG-Grid website [https://www.ag-grid.com/javascript-grid-cell-editor/ ...

angulartypescriptinputag-grid

Customize the Default Functionality in Angular Material Expansion Panel Header

I'm currently attempting to customize the collapse and expand functionality of the Angular Material Expansion Panel. By default, when a user clicks anywhere in the Panel Header, the Expansion Panel will toggle between expanding and collapsing. My go ...

angularangular-material2

Determining if an emitted event value has been altered in Angular 4

I am currently working on an Angular 4 project. One of the features I have implemented is a search component, where users can input a string. Upon submission of the value, I send this value from the SearchComponent to the DisplayComponent. The process of ...

javascriptangulartypescriptobservable

Adding Custom CSS File to an iFrame in Angular

Currently, I am attempting to include a CSS file in a third-party iframe to modify its styling. My initial idea was to employ the following code snippet: ngOnInit() { ... this.myIframe.nativeElement.document.head.appendChild('style.css') } U ...

cssangulariframe

Issue encountered with Ionic and ssh2: process.binding is not supported

I am currently delving into the world of Ionic and experimenting with creating a basic application that utilizes SSH2 to establish an ssh connection between the app and a server. Here is a breakdown of the steps I took to encounter the issue: Steps to Rep ...

javascriptnode.jstypescriptionic-frameworkionic3

Tips for passing TouchableOpacity props to parent component in React Native

I created a child component with a TouchableOpacity element, and I am trying to pass props like disabled to the parent component. Child component code: import React from 'react'; import {TouchableOpacity, TouchableOpacityProps} from 'react- ...

typescriptreact-native

Utilizing an object property for @Input binding in Angular: A step-by-step guide

I am currently delving into Angular and Ionic Frameworks, honing my skills through practice. I'm encountering an issue with a basic @Input test, where I am trying to iterate through an array of Tab Pages and then display each tab using <ion-tab> ...

angulartypescriptionic-frameworkinput

Is there a way to automatically incorporate a component into every view within a Next.js application?

Is there a more efficient and less cumbersome way to import components for every view in a Next.js app? I am interested in incorporating the "arwes" framework into my project and utilizing components from . One of the examples of a component I will be usin ...

reactjstypescriptnext.jsjsxstyled-components

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution for grid placement) import Butto ...

cssreactjstypescriptreact-grid-layout

Updating Angular components by consolidating multiple inputs and outputs into a unified configuration object

When I develop components, they often begin with numerous @Input and @Output properties. However, as I continue to add more properties, I find it beneficial to transition to utilizing a single config object as the input. For instance, consider a component ...

javascriptangularangular-components