RouterLink/AddEventListener not working with SafeHtml

Hi,

I 'm creating an app with Notification, I stored them with a text like :
$name like your photo

When the App loads the notification it parse it before display it.

My goal is to add some link to the text before display it on the screen, like this for exemple:
$name like you pseudo ==> <a routerLink="profile/nameId">@Henry</a> like your photo

1 - routerLink
First I tried this solution :

HTML : I pass my variable with [innerHTML]="doms.bypassSecurityTrustHtml(notification.text)"

<ion-list>
   <ion-item *ngFor="let notification of notifications" color="{{notification.new ? 'itemback' : ''}}">
     <div [ngClass]="{'new_notification' : notification.new}">
       <ion-label class="ion-text-wrap" >
         <h3 class="activity_date">{{notification.createdAt | date:'longDate'}}</h3>
         <p class="activity_message" [innerHTML]="doms.bypassSecurityTrustHtml(notification.text)"></p>
       </ion-label>
     </div>
   </ion-item>
 </ion-list>

TS :

notif.text = notif.text.replace(/\$name/g,  '<a routerLink="[\'profile\', notif.refNameId">@' + notif.name + '</a>');

ERROR : Here the security function block the routerLink function and transform it in lower case :
<a [routerlink]="['profile','12345789']>Henry</a> likes your photo


2 - addEventListener
I tried to add the event to the <a> directive and then handle the redirecton in the code.

HTML : IIt’s the same, I just add a “test” button

TS :

I had selector instead of the routerLink and I pass the ID of the NAME in the id tag.

notif.text = notif.text.replace(/\$name/g, '<a class="name_link" id="123456">@' + notif.refName.pseudo + '</a>');
test() {
    console.log('test');

    const nameLink = document.getElementById('test');
    console.log(nameLink);
    tipseursLink.addEventListener('click', (e) => { console.log('test click event'); });
    tipseursLink.classList.add('hueframe');
    console.log(nameLink);

  }

ERROR : Nothing happened …
I load py page, click on the Test button that shoud add the event listener to my directive then I click on the @Hnery but nothing …

As you can see I had tipseursLink.classList.add('hueframe'); for test purpose and I observed that the class is add to the directive but VERY quickly erase ! I even had to spam the refresh button to see it !

I tried to change the directive from <a> to <button> <div> … nothing works !

Can you help me ?
Please ask if something isn’t clear.

EDIT1: I add that I can’t just split my text and display the text like this :
<a routerLink="..." >{{pseudo}}</a> {{text}}
Because I don’t always where the $name will be in the text and it can be in the middle of the sentence.

Thanks in advance
Xav

While you wait for better answers, what I would do is to pretend that innerHTML doesn’t exist, and try to think of a way to reimplement this entirely, that leaves the markup in the template and doesn’t pollute the controller with it.

Hi thanks for your tips
But first I tried with just this :

<p class="activity_message">{{doms.bypassSecurityTrustHtml(notification.text)}}}</p>

But I have a error message telling me that I need to use binding variable like [þroperty]=binding
image

That’s why I use innerHtml
Edit: And without the bypass function it’s interpret as text not HTML directives

Sorry, perhaps I should have been more clear. My problem is with the entire concept of processing HTML in the controller (sorry, I realize that’s archaic AngularJS terminology - I mean “the JavaScript/TypeScript side of your code, as opposed to the HTML template”). So that includes bypassSecurityTrustHtml.

I am suggesting using something other than HTML as the payload of your notifications. JSON, for example.

{"user": {"id": "deadbeef", "name": "@Henry"}, "action": "liked your photo"}

Now you can do things like:

<div *ngFor="let n of notifications">
<a (click)="goToProfile(n.user)">{{n.user.name}}</a>
<span>{{n.action}}</span>
</div>

Your goToProfile method (or equivalent routerLink, if you like that better) has access to whatever you put in the user object of the notification. I threw an id field in there as a sample idea, but you can use this to transfer structured information in a format that will result in (at least what I consider) much more idiomatic Angular.

Yes I thought about it.
But like I said in my first EDIT part, with this method how can you handle if the name is in the middle of the sentence ?

If now my notification is :
“A new photo was post by your friend @henry yesterday”

How can I manage this with your technique ?

Probably several ways. Sprintf-style format strings could work. Personally, I think what I would do is to just send key strings that aren’t designed for human readability in the JSON, like “newPhotoNotification”, and leverage Angular’s localization system to convert them to human-intended display format. This gives you the benefit of multilingual support as well as handling the interpolation issues.