Display A Link In Dynamically Obtained Html Text

I am dynamically obtaining a list of strings.I display it in angular using ngFor. But when displayed, certain strings include few hyperlinks ,but they are displayed as normal strin

Solution 1:

If I get it right, its really simple and you can do that like this :

<a href="{{yourlinkVariable}}">{{Text Variable}}</a>

Solution 2:

you can make a pipe, but this pipe must be used in a [innerHtml]

@Pipe({name: 'linkPipe'})
export class LinkPipe implements PipeTransform {
  constructor(private _domSanitizer: DomSanitizer){}
  transform(value: string): any {
    if (value.indexOf("http")>=0)
    {
      //search the "link"
      const link=value.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+~#?&//=]*)?(\[.*\])?/)
      if (link) //if has a link
      {
        const valueSplit=link[0].split('[') //check if is in the way: 
                                            //http://direccion[text to show]
        value=value.replace(link[0],
            "<a href='"+valueSplit[0]+"'>"+
              (valueSplit[1]?valueSplit[1].slice(0,-1):valueSplit[0])+
            "</a>")
      }
    }
    return this._domSanitizer.bypassSecurityTrustHtml(value)
  }
}

e.g. of use

<p [innerHTML]="'see the http://www.google.com[page of Google] for more information'|linkPipe "></p>
<p [innerHTML]="'http://www.google.com'|linkPipe"></p>

see stackblitz