PoC for innerHtml click interception

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

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

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

@@ -1,9 +1,10 @@
-import { Component, OnInit, Input, Output, Inject, LOCALE_ID, ElementRef, EventEmitter } from "@angular/core";
+import { Component, OnInit, Input, Output, Inject, LOCALE_ID, ElementRef, EventEmitter, Pipe, PipeTransform, ViewChild, Renderer2 } from "@angular/core";
 import { Status, Account } from "../../../services/models/mastodon.interfaces";
 import { formatDate } from '@angular/common';
 import { stateNameErrorMessage } from "@ngxs/store/src/decorators/state";
 import { StatusWrapper } from "../stream.component";
 
+import { DomSanitizer } from '@angular/platform-browser'
 
 @Component({
     selector: "app-status",
@@ -20,6 +21,8 @@ export class StatusComponent implements OnInit {
     @Output() browseHashtag = new EventEmitter<string>();
     @Output() browseThread = new EventEmitter<string>();
 
+    @ViewChild('content') contentElement: ElementRef;
+
     private _statusWrapper: StatusWrapper;
     status: Status;
     @Input('statusWrapper')
@@ -27,6 +30,10 @@ export class StatusComponent implements OnInit {
         this._statusWrapper = value;
         this.status = value.status;
 
+        //TEST
+        this.status.content += '<br/><br/><a href class="test">TEST</a>';
+
+
         if (this.status.reblog) {
             this.reblog = true;
             this.displayedStatus = this.status.reblog;
@@ -50,11 +57,32 @@ export class StatusComponent implements OnInit {
 
 
     constructor(
+        private renderer: Renderer2,
         @Inject(LOCALE_ID) private locale: string) { }
 
     ngOnInit() {
     }
 
+    ngAfterViewInit() {
+        //this.contentElement.nativeElement.querySelector('my-element').addEventListener('click',this.test.bind(this)); 
+
+        let el = this.contentElement.nativeElement.querySelector('.test');
+        console.log(this.contentElement.nativeElement);
+        console.log(el);
+        if(el)
+        this.renderer.listen(el, 'click', (el2) => {
+            console.log(el2);
+            console.warn('YOOOOO');
+            return false;
+        });
+
+
+        // setTimeout(() => {
+        //     this.contentElement.nativeElement.querySelector('a.test')[0].onclick(this.test());
+        // }, 100);
+
+    }
+
     openAccount(account: Account): boolean {
         this.browseAccount.next(account);
         return false;
@@ -88,4 +116,9 @@ export class StatusComponent implements OnInit {
         this.replyingToStatus = false;
         return false;
     }
+
+    test(): boolean {
+        console.warn('heeeeyaaa!');
+        return false;
+    }
 }