Showing identification and name within a URL path - Angular

I am looking to update a URL path within a website from

http://localhost:4200/viewbrand/1
to
http://localhost:4200/viewbrand/1/soap
, where "soap" is added after the ID in the path.

The current code in the routing module.ts file is as follows:

{ path: 'viewbrand/:id', component: LocalbrandsComponent },

Here is the existing code in the HTML file:

<a class="tile-link" href="/viewbrand/{{brand.id}}"></a>
                  

I attempted to make changes to both the module.ts and HTML files as shown below. However, it seems that the modification does not yield the desired outcome.

{ path: 'viewbrand/:id'/:brand.name, component: LocalbrandsComponent }

<a class="tile-link" href="/viewbrand/{{brand.id}}/{{brand.name}}"></a>

Despite my efforts, the functionality does not work as expected. Is there a logical error in my approach?

Answer №1

Initially, I assumed you were looking to redirect from the old URL to the new one. However, it seems that you are actually trying to edit the URL. In this case, ensure that you have included the full path inside of quotations.

{ path: 'viewbrand/:id/:name', component: LocalbrandsComponent }
<a class="tile-link" href="/viewbrand/{{brand.id}}/{{brand.name}}"></a>

If this is the scenario, I am slightly worried that your IDE did not alert you about this issue. Nevertheless, the redirect solution is also provided below.


This can be achieved by using an intermediary component to extract the name and then redirect to the new route.

{ path: 'viewbrand/:id', component: RedirectComponent },
{ path: 'viewbrand/:id/:name', component: LocalbrandsComponent },
export class RedirectComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  getName(id: string) {
    return 'name-for-' + id;
  }

  ngOnInit(): void {
    const id = this.route.snapshot.params['id'];
    const name = this.getName(id);
    this.router.navigate(['viewbrand', id, name]);
  }
}

Answer №2

Avoid using values that are subject to dynamic rendering in the route.

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

Enhance Your Search Input: Adding an Icon Before Placeholder Text in Material Design

I am currently facing an issue where the placeholder text is overlapping the icon in the code below. I need to have the placeholder text indented to the right of the icon. Is there a more efficient way to include both an icon and a placeholder text in a ...

What could be causing my TSC to constantly crash whenever I try to utilize MUI props?

Currently in the process of converting a JavaScript project using Next.js and Material UI to TypeScript. This is a snippet of code from one of my components. Whenever I include Props as an intersection type along with MUI's BoxProps, the TypeScript c ...

Incorporate Add to Homescreen functionality into your Angular 4 Project using JavaScript

Currently I am in the beginning stages of learning Angular development. One of my assignments involves integrating the add to homescreen jQuery plugin into one of my pages. This is my attempt at implementing it in my home.component.ts file: ngAfterViewIn ...

Setting up the TypeScript compiler locally in the package.json file

UPDATE #1: It appears that I have managed to come up with a functional configuration, but I am open to any suggestions for improvement. Feel free to check out the answer here: THE ORIGINAL INQUIRY: I am in the process of setting up my environment so that ...

Value attribute property binding

Currently, I am diving into the world of Angular 5 and focusing on grasping the fundamentals. One concept that caught my attention is template reference variables. However, I encountered a roadblock along the way. Instead of utilizing a template reference ...

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

I have created a custom Directive called isSelected and applied it to several elements in different components as shown below: <i isSelected class="icon"></i> <i isSelected class="icon"></i> <i isSelected class="icon"></i ...

Leverage elements from nearby npm repository when building an Angular 2 application

After developing a generic chart component using d3 and Angular 2, I decided to share it by publishing it in a local npm repository. This way, anyone can easily incorporate the chart component into their Angular project by simply running the npm install my ...

Creating a dynamic path to an imported file in React: A step-by-step guide

Struggling with a dilemma regarding dynamically generated paths for importing files in React. I have utilized the map() function to generate a dynamic part of the code, consisting of a repetitive sequence of div elements, each housing an audio element. The ...

I can see the JSON data printing to the console in Ionic 3, but it doesn't display on

I seem to be facing a challenge with passing the 'item' to my search function in my Ionic 3 app. Although I was able to successfully connect to a json data file and print objects to the console, I am encountering an error message on the page that ...

Leveraging latitude and longitude data from an API to create circles on the AGM platform

I need assistance with utilizing location data from recent earthquake events to center a circle on Angular Google Maps. Can anyone provide guidance on how to achieve this? The API call provides the following data: 0: --geometry: ---coordinates: Array( ...

Transferring a PDF document to a server via a POST request

I have implemented a PDF upload section for users on my website and I want to send the uploaded file to an S3 bucket through a micro-service that I have developed. However, when I try to send the file from the front-end, it seems to be coming through empty ...

Ensuring type signatures are maintained when wrapping Vue computed properties and methods within the Vue.extend constructor

Currently, I am trying to encapsulate all of my defined methods and computed properties within a function that tracks their execution time. I aim to keep the IntelliSense predictions intact, which are based on the type signature of Vue.extend({... Howeve ...

Tips on continuously making calls to a backend API until receiving a successful response with status code 200

While working on my Angular project, I have encountered a situation where I need to make calls to a backend API. If the response is not 200 OK, I have to keep calling the API every 30 seconds until I receive a successful response. In Angular, I usually ca ...

Is there a way to alter the stroke color of an SVG icon in Angular 2 or 4 by clicking on it?

Having trouble with this code, can someone provide a solution? This is the SVG icon code: <svg id="Home" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.28 43.49"> <defs> <style> .cls-1{fill:none;stro ...

Issue with Angular 12 service worker causing SW update to fail

I'm currently working on integrating a service worker into my Angular application to enable updates without user intervention. Here is the step-by-step process that I am following: Make changes to the application Run ng build Start an HTTP ser ...

Angular tutorial on splitting a JSON array

I am looking to extract a portion of a JSON array in Angular. The array looks like the one in the image below.https://i.stack.imgur.com/w0hqC.png Below is the code snippet: export class AppComponent { color: string = 'green'; public stocklis ...

My goal is to intentionally trigger an eslint error when importing a file from index.ts

Is there a way to enforce importing components from index.ts within the src/components directory using eslint rules or plugins? // index.ts (src/components/Forms) export { Input } from './Input'; export { CheckBox } from './CheckBox'; ...

Troubleshooting a Jasmine Unit Testing Error for Button Click in Angular 4

Exploring the world of Jasmine and Angular 4, I am aiming to write tests for a button functionality in a multi file upload feature. Below is the code snippet from my spec file: import { async, ComponentFixture, TestBed } from '@angular/co ...

When using Validators.pattern('^[0-9][0-9][0-9]$') in Angular 9, it does not validate numbers with a leading 0, such as 012

When attempting to validate a simple PIN with the possibility of leading zeros, I created this basic regular expression: ^[0-9][0-9][0-9][0-9][0-9][0-9]$ Although this regex worked fine on various online tools for testing regular expressions, it failed i ...

Tips for resolving the error when setting up @ngrx/store?

I'm encountering an issue during the installation of @ngrx/store. Is there anyone who can assist me in resolving this error? PS C:\Users\Welcome\ngrx-test> npm install @ngrx/store npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to re ...