render HTML posts properly, issues #4 and #17

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
 import { IonicStorageModule } from '@ionic/storage';
 import { Device } from '@ionic-native/device';
 import { TimeagoPipe } from '../pipes/timeago/timeago';
+import { ParserPipe } from '../pipes/parser/parser';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { TimeagoPipe } from '../pipes/timeago/timeago';
     StreamPage,
     ThreadPage,
     TimeagoPipe,
-    NewPostModal
+    NewPostModal,
+    ParserPipe
   ],
   imports: [
     BrowserModule,

src/pages/stream/stream.html

@@ -38,7 +38,10 @@
         </ion-note>
       </ion-item>
       <ion-card-content>
-        <p>{{ post.is_deleted ? '{post deleted}' : post.content.text }}</p>
+        <div *ngIf="post.is_deleted; else renderBlock"></div>
+        <ng-template #renderBlock >
+          <div [innerHTML]="post.content.html | parser"></div>
+        </ng-template>
       </ion-card-content>
       <div *ngIf="post.raw">
         <div *ngFor="let r of post.raw">

src/pipes/parser/parser.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl} from '@angular/platform-browser';
+
+/**
+ * Generated class for the ParserPipe pipe.
+ *
+ * See https://angular.io/docs/ts/latest/guide/pipes.html for more info on
+ * Angular Pipes.
+ */
+@Pipe({
+  name: 'parser',
+})
+export class ParserPipe implements PipeTransform {
+
+  constructor(protected _sanitizer: DomSanitizer) {}
+
+  transform(value: string, ...args): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
+    return this._sanitizer.bypassSecurityTrustHtml(value);
+  }
+}

src/pipes/timeago/timeago.ts

@@ -12,9 +12,7 @@ import * as moment from 'moment';
 })
 export class TimeagoPipe implements PipeTransform {
   now: any;
-  /**
+
-   * Takes a value and makes it lowercase.
-   */
   transform(value: string, ...args) {
     this.now = moment(value).fromNow(true);
     return this.now;