Showing identification and name within a URL path - Angular

Question

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?

angular typescript

Answer 1

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

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 3

Answer №2

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

Answer 4

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

Showing identification and name within a URL path - Angular

Answer №1

Answer №2

Similar questions

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

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

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

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

Value attribute property binding

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

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

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

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

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

Transferring a PDF document to a server via a POST request

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

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

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

Issue with Angular 12 service worker causing SW update to fail

Angular tutorial on splitting a JSON array

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

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

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

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