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

Instructions on how to post an array by its ID when the value changes in the form, correspond with the ID

Angular6 : PrimeNg datatable: the nova-light theme failing to activate

I have implemented an email validation form in Angular, however, if the validation is not properly handled, the data will still be stored. How

Issue: "The argument provided must be a specific string, not a string or an array of strings."

Is it possible to apply a formatting filter or pipe dynamically within an *ngFor loop in Angular (versions 2 and 4

Typescript: Select just one option from the union

Setting up AngularJS 1.5.x to function seamlessly with SystemJS and TypeScript

Converting a JavaScript function to work in TypeScript: a step-by-step guide

What is the primary purpose of the index.d.ts file in Typescript?

Exploring end-to-end testing with NestJS and Guards

A Guide to Implementing Inner CSS in Angular

What is the process in Typescript for importing JSON files and dynamically searching for values based on keys?

React TypeScript: The properties of 'X' are not compatible. 'Y' cannot be assigned to 'Z' type

What is the method to obtain the complete URL in Angular?

Have you encountered an issue while trying to retrieve CSV data using Angular HttpClient? It seems like there might be an unexpected

Converting a specific string format to a Date object in TypeScript

Is it possible to conceal dom elements within an ng-template?

Make sure to refresh the state of the store whenever there is a change detected in the input

Linking custom Form Material Select component to FormControl validators

When the appdir is utilized, the subsequent export process encounters a failure with the error message "PageNotFoundError: Module for page /(...) not