replace urls pipe

app/src/components/tweet-body/tweet-body.html

@@ -1,4 +1,4 @@
 <!-- Generated template for the TweetBodyComponent component -->
 <div>
-  <p>{{ text }}</p>
+  <p [innerHTML]="text | replaceUrls: entities.urls"></p>
 </div>

app/src/components/tweet-body/tweet-body.ts

@@ -12,7 +12,7 @@ import { Component, Input } from '@angular/core';
 })
 export class TweetBodyComponent {
 
-  @Input() text: any[];
+  @Input() text: string;
   @Input() entities: any[];
 
   constructor() {}

app/src/pipes/pipes.module.ts

@@ -1,11 +1,14 @@
 import { NgModule } from '@angular/core';
 import { FriendlyNumberPipe } from './friendly-number/friendly-number';
 import { DiffForHumansPipe } from './diff-for-humans/diff-for-humans';
+import { ReplaceUrlsPipe } from './replace-urls/replace-urls';
 @NgModule({
 	declarations: [FriendlyNumberPipe,
-    DiffForHumansPipe],
+    DiffForHumansPipe,
+    ReplaceUrlsPipe],
 	imports: [],
 	exports: [FriendlyNumberPipe,
-    DiffForHumansPipe]
+    DiffForHumansPipe,
+    ReplaceUrlsPipe]
 })
 export class PipesModule {}

app/src/pipes/replace-urls/replace-urls.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * Generated class for the ReplaceUrlsPipe pipe.
+ *
+ * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
+ */
+@Pipe({
+  name: 'replaceUrls',
+})
+export class ReplaceUrlsPipe implements PipeTransform {
+  /**
+   * Takes a string and replace the urls with hyperlinks.
+   */
+  transform(value: string, ...args) {
+    for (let url of args[0]) {
+      value = value.replace(url["url"], '<a href="' + url["expanded_url"] + '" target="_blank">' + url["display_url"] + '</a>');
+    }
+
+    return value;
+  }
+}