How to show Angular routerLink as plain text in html?

Question

My HTML currently contains a routerLink like below, which works nicely

<a mat-button [routerLink]="['/some','route', hash]">Click Here</a>

How can I replace the text "Click Here" with the actual link generated by routerLink? Such that it looks like plain text, like

Your link is: https://localhost:4200/some/route/deadbeef

"deadbeef" is the hash value here.

score 0 · Answer 1 · answered Mar 14 '19 at 15:42

Since the routerLink only generates absolute URLs, like /some/route/deadbeef. I added the following my project:

app.module.ts

Injector for "origin"

{
provide: 'origin',
useValue: window.location.origin
}

in my constructor:

@Inject('origin') public origin: string

and finally in my HTML code

<a mat-button [routerLink]="['/some','route', hash]">{{origin}}/some/route/{{hash}}</a>

1 Answers1