created component to host text to parse and databind

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { UserProfileComponent } from './components/stream/user-profile/user-prof
 import { ThreadComponent } from './components/stream/thread/thread.component';
 import { HashtagComponent } from './components/stream/hashtag/hashtag.component';
 import { StreamOverlayComponent } from './components/stream/stream-overlay/stream-overlay.component';
+import { DatabindedTextComponent } from './components/stream/status/databinded-text/databinded-text.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -70,7 +71,8 @@ const routes: Routes = [
     UserProfileComponent,
     ThreadComponent,
     HashtagComponent,
-    StreamOverlayComponent
+    StreamOverlayComponent,
+    DatabindedTextComponent
   ],
   imports: [
     BrowserModule,

src/app/components/stream/status/databinded-text/databinded-text.component.html

@@ -0,0 +1,2 @@
+<div #content class="content" innerHTML="{{processedText}}"></div>
+ 

src/app/components/stream/status/databinded-text/databinded-text.component.scss

@@ -0,0 +1,20 @@
+@import "variables";
+
+//Mastodon styling
+:host ::ng-deep .content {
+    // font-size: 14px;
+    color: $status-primary-color;
+    & a,
+    .mention,
+    .ellipsis {
+        color: $status-links-color;
+    }
+    & .invisible {
+        display: none;
+    }
+    & p {
+        margin: 0px;
+        //font-size: .9em;
+        // font-size: 14px;
+    }
+}

src/app/components/stream/status/databinded-text/databinded-text.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatabindedTextComponent } from './databinded-text.component';
+
+describe('DatabindedTextComponent', () => {
+  let component: DatabindedTextComponent;
+  let fixture: ComponentFixture<DatabindedTextComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatabindedTextComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatabindedTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/stream/status/databinded-text/databinded-text.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'app-databinded-text',
+    templateUrl: './databinded-text.component.html',
+    styleUrls: ['./databinded-text.component.scss']
+})
+export class DatabindedTextComponent implements OnInit {
+    private accounts: string[] = [];
+    private hastags: string[] = [];
+
+    processedText: string;
+
+    @Output() accountSelected = new EventEmitter<string>();
+    @Output() hashtagSelected = new EventEmitter<string>();
+    @Output() textSelected = new EventEmitter();
+
+    @Input('text')
+    set text(value: string){
+        this.processedText = value;
+    }
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

src/app/components/stream/status/status.component.html

@@ -14,7 +14,10 @@
     </a>
     <div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">{{
         getCompactRelativeTime(status.created_at) }}</div>
-    <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div>
+    <!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
+
+    <app-databinded-text class="status__content" [text]="displayedStatus.content"></app-databinded-text>
+
 
     <app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments"></app-attachements>
 

src/app/components/stream/status/status.component.scss

@@ -77,6 +77,7 @@
         /*width: calc(100% - 50px);*/
         word-wrap: break-word;
         margin: 0 10px 0 $avatar-column-space;
+        display: block;        
     }
     // &__content p {
     //     margin: 0 !important;
@@ -90,28 +91,6 @@
     }
 }
 
-// .attachments {
-
-// }
-
-//Mastodon styling
-:host ::ng-deep .status__content {
-    color: $status-primary-color;
-    & a,
-    .mention,
-    .ellipsis {
-        color: $status-links-color;
-    }
-    & .invisible {
-        display: none;
-    }
-    & p {
-        margin: 0px;
-        //font-size: .9em;
-        // font-size: 14px;
-    }
-}
-
 .attachments {
     display: block;
     // width: calc(100% - 80px);

src/app/components/stream/status/status.component.ts

@@ -31,7 +31,7 @@ export class StatusComponent implements OnInit {
         this.status = value.status;
 
         //TEST
-        this.status.content += '<br/><br/><a href class="test">TEST</a>';
+        //this.status.content += '<br/><br/><a href class="test">TEST</a>';
 
 
         if (this.status.reblog) {