Is it possible to build a dynamic URL in text with Angular 7

Question

I want to create an URL dynamically when clicking on link in comment. Is there any method achieving this?

   import { Component } from '@angular/core';

   @Component({
      selector: 'my-app',
      template: `<div [innerHTML]="Text"></div>`,
   })

   export class AppComponent  {

      DokumentID: 5

      Text = `The attached document can be found on this link.
              <br><br>
             <a [href]="DokumentOpen(DokumentID)" target="_blank">test.pdf</a>.
             `

      DokumentOpen(DokumentID: number): string{ 
          return "docs/load?"+DokumentID
      }

    }

can you put your text directly on template? Also you may want to have a click event handler instead of use href attribute on your link. Then you can use router API to achieve redirection.(or window.open if a new window) — wctiger, May 21 '19 at 18:48
Possible duplicate of [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) — JB Nizet, May 21 '19 at 18:55
This is not duplicate of Angular HTML binding. Before I wrote my question, I looked at all related questions including this. There is a real duplicate of my question. https://stackoverflow.com/questions/51640982/build-a-dynamic-url-on-anchor-tag-click-angular-5 But It has no accepted and correct answer. — Ali Altun, May 21 '19 at 19:01
these text including href produced by user as an comment. The href in these text refers to document link produced and controlled by same service. It is easy to use static lick in text as The attached document can be found on this link test.pdf . The document id produced by the service is order number. So it easy to manipulate the system. That's why I want to change the link in text dynamically before open the document in browse. — Ali Altun, May 21 '19 at 19:43

score 1 · Accepted Answer · answered May 21 '19 at 20:39

1

You are binding innerHtml, then putting text in it and then expecting Angular to treat it as Angular directives. Why the complexity?

Why not just do this?

    import { Component } from '@angular/core';

    @Component({
          selector: 'my-app',
          template: `<div>`The attached document can be found on this link.
                  <br><br>
                 <a routerLink="docs/load?{DocumentID}" target="_blank">test.pdf</a></div>`,
       })

       export class AppComponent  {
          DocumentID: 5
        }
}

answered May 21 '19 at 20:39

Ben Richards

3,437
1
14
18

At first it was easy to put link into comment. After the idea of dynamically encrypting the document numbers used in the link, it become more complicated. If I can't find the solution, I will do as you say. – Ali Altun May 21 '19 at 21:49
1

Give. E more context on what exactly you are trying to achieve and I might be able to give you a better solution. – Ben Richards May 21 '19 at 23:03
As far as I understand, usage of the dynamic link in text is not easy. Is it possible to use routerLink in text as an alternative? – Ali Altun May 21 '19 at 23:48
1

Using "dymanic" text as you called it is complicated in Angular based directives because Angular safeguards binding text to directives by getting rid of any HTML. Using routerLink in text that you then bind will have the same limitation. – Ben Richards May 21 '19 at 23:53
Hi Richards, Thank you for your interest. I have a comment table in the database. The comment table has an mediumtext field for user comment. User can add dokument (generally pdf) link that is related to document table. I use [innerHTML] in div to show these comment on the related page. When user click an a document link in comment, ı show these document in another tab in the browser. This system works well now. But ı want to change the document id in the link before open the link due to safety reasons. – Ali Altun May 21 '19 at 23:59
Like I guess. I think, I have to add a document id to the comment table. Then I produce the angular template rendered text in the page. – Ali Altun May 22 '19 at 00:02
You can take the text from the comment table and use some regular expressions to extract the document ID or the full link, then do whatever you want with it. – Ben Richards May 22 '19 at 00:13

score 0 · Answer 2 · answered May 21 '19 at 19:48

0

you can create like below:

 <a href="{{downloadURL}}/File/{{fileName}}" id="upload" download="{{fileName}}" target="_self" role="link" class="btn btn-link" >
                      {{ fileName }}
                  </a>
downloadURL = '';
this.downloadURL = environment.apiURL; 
// you can hardcode or take from the enviornment.

answered May 21 '19 at 19:48

Mr. Jay

153
2
5
16

this technique works in template. But it not work for link in text. https://stackblitz.com/edit/angular-dvqupq – Ali Altun May 21 '19 at 19:58

score 0 · Answer 3 · answered May 21 '19 at 20:01

0

Use placeholders. Also, format the query string properly.

return `docs/load?id=${DokumentID}`;

Note the backticks.

This could also be done in the service method using HttpParams.

answered May 21 '19 at 20:01

The Head Rush

3,157
2
25
45

I have applied your suggestion. Unfortunately not. Test code: https://stackblitz.com/edit/angular-7mlrux – Ali Altun May 21 '19 at 20:16

Is it possible to build a dynamic URL in text with Angular 7

3 Answers3