Format routerLink param url

Question

In my angular 2 app I have defined a router link like :

<a *ngFor="let demo of demos" [routerLink]="['demo', demo.name]">example</a>

Currently I am getting demo.name as "example.net/demo/A%20%demo%20%test". I want to format this as "example.net/demo/a-demo-test" to show in the browser address bar.

Any help would be appreciated.

Try to replace spaces with dashes. Eg: `[routerLink]="['demo', demo.name.replace(/\s+/g, '-')]"` — Titus, Mar 22 '17 at 17:26
@JaroslawK. I have routing defined separately in each module. — Sumit Chaudhari, Mar 22 '17 at 17:31
@Titus I tried your solution this gives me error "Template parse errors: Parser Error: Unexpected token / at column 35 in". — Sumit Chaudhari, Mar 22 '17 at 17:32

score 4 · Accepted Answer · answered Mar 22 '17 at 17:30

You can use functions inside routerLink. So you can use a function in your component:

  hyphenateUrlParams(str:string){
    return str.replace(' ', '-');
  }

And use it in your routerLink:

[routerLink]="['/demo', hyphenateUrlParams(demo.name)]"

This provides much more re-usability than mutating variables directly inside the routerLink.

score 1 · Answer 2 · answered Mar 22 '17 at 17:37

Create a pipe that converts spaces to hyphens.

@Pipe({
  name: 'kebabCase'
})
export class KebabCasePipe implements PipeTransform {

  transform(value: string): string {
      return value.replace(' ', '-');
  }

}

Use the pipe in your links:

<a *ngFor="let demo of demos" [routerLink]="['demo', demo.name | kebabCase]">example</a>

Format routerLink param url

2 Answers2