CODEWITHSUNDEEP
angular
Ali Altun
Ali Altun

Reputation: 407

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

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

test code on stackblitz.com

   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
      }

    }

Upvotes: 0

Views: 4719

Answers (3)

Ben Richards
Ben Richards

Reputation: 3575

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
        }
}

Upvotes: 1

The Head Rush
The Head Rush

Reputation: 3356

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.

Upvotes: 0

Mr. Jay
Mr. Jay

Reputation: 153

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.

Upvotes: 0

Related Questions