CODEWITHSUNDEEP
javascriptangular
chewi
chewi

Reputation: 159

How to identify links in a paragraph and make it clickable Angular 2

I have a paragraph of strings containing links. The links have to be clickable and redirect the user to the specific pages. I have written custom pipe, but am missing the point here.

Tried:

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

@Pipe({
  name: 'urlify'
})

export class UrlifyPipe implements PipeTransform {

  transform(text: any): any {
    var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function(url) {
      return '<a href="' + url + '">' + url + '</a>';
    });
  }
}

And my string:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo www.sentinal.com. Aenean massa. Cum sociis http://sentinal.com et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium

Result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo www.sentinal.com. Aenean massa. Cum sociis <a href="http://sentinal.com">http://sentinal.com</a> et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

As we can see, www.sentinal.com and http://sentinal.com is not really converted. a h tag been added but that's not what I want. Any idea guys how to achieve it. I can't use Urlify library, I want to write it in my own codes. Thanks in advance

Upvotes: 0

Views: 1483

Answers (1)

John Velasquez
John Velasquez

Reputation: 3451

You should do it like this

<div [innerHtml]="my_model | urlify "></div>

We have to use the innerHtml so that it will render the html format tags

Upvotes: 5

Related Questions