How to automatically add http prefix in a href using Angular 5

Question

Is there a way in angular 5 to add the prefix http automatically if res.MyWebsiteURL do not contains it.

I would like to have a generic way to do it since I'll use at many place in the project.

<a  target="_blank" href="http://{{res.MyWebsiteURL}}">Visit My Website</a>

Is there a way to do it throught a Directive ?

Thanks a lot

`s.startsWith('http://') ? s : 'http://' + s`? This is basic JS. You should be able to figure that out by yourself if you want to do something serious with Angular. — JB Nizet, Dec 31 '17 at 15:05
I'm trying to do it throught a directive. I think this is the proper way to do it no ? — Jean-Francois, Dec 31 '17 at 15:44
A pipe seems much more appropriate. You just have a string as input, and a string as output. — JB Nizet, Dec 31 '17 at 15:45
@JBNizet I agree with the Pipe. I'll see how to do it. Thanks a lot — Jean-Francois, Dec 31 '17 at 15:46
You should post the solution as an answer, not in the question, and mark it as accepted. — JB Nizet, Dec 31 '17 at 16:10

score 4 · Answer 1 · answered Dec 31 '17 at 16:12

I did a PipeTransform
With a PipeTransform, you can modify a string element as needed. In my case, I wanted to determine if http prefix was include in the url or not. If it's not include, I'll inlcude it.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'linkHttp'
})
export class LinkHttpPipe implements PipeTransform {
  transform(href: string) {
    return href.startsWith("http://") || href.startsWith("https://") ? href : "http://" + href
  }
}

Here is how to use it

<a  target="_blank" href="{{res.MyWebsiteURL | linkHttp}}">Visit My Website</a>

Special thanks to JBNizet for the help

score 2 · Answer 2 · answered Aug 25 '21 at 10:57

In my case this worked fine.

component.html:

<a [href]="getSubdomainLink(element)" target="_blank"> 
{{element.subDomain}} </a>

component.ts:

getSubdomainLink(element: any) {
    return String(element.subDomain).startsWith('http') ? 
    element.subDomain : 'http://' + element.subDomain;
}

score 0 · Answer 3 · answered Jan 01 '18 at 02:36

0

Use double forward slash:

<a [href]="'//' + url">link</a>

answered Jan 01 '18 at 02:36

Christian

2,676
3
15
25

How to automatically add http prefix in a href using Angular 5

3 Answers3