angular best way to interact with the router from html text input

Question

I use froala text editor to store some user inputs. I want to create some specific output in the html text which create links ables to interact with the router or with the app in general (call function in controllers and so on...).

What is the best way to "reinterpret" html links as routed links so the page won't be reload?

froala output:

<a href="/someRoute">some text</a>

will become after treatment:

<a [routerLink]="['/someRoute']">some text</a>

Edit: I don't need froala. I can create my own editor. But I need to convert html user input into router link or component functions

Edit 2: Is it possible to reinterpret html as

<app-mycomponent [someVariable]="someVariable"></app-mycomponent>

Here a skeleton of what I need: https://stackblitz.com/edit/angular-tnnw8n?embed=1&file=src/app/hello.component.ts

I can parse the html to find my specific tags and use *ngIf in the view

<ng-container *ngFor="let parsedHtml of arrayOfHtmlPart">
  <ng-container *ngIf="isHtml(parsedHtml)">
    {{parsedHtml}}
  </ng-container>
  <ng-container *ngIf="!isHtml(parsedHtml)">
    <app-mycomponent></app-mycomponent>
  </ng-container>
</ng-container>

but it is not elegant

Answer 1

As Nasiruddin Saiyed said, you should use Nasiruddin Saiyed @HostListener and then detect the A tags you want to be treated as router links. If the element class is set to 'content-inside', it will act has a router link (without reload)

@HostListener('click', ['$event'])
    public onClick(event) {
      if (event.target.tagName === 'A' && event.target.getAttribute('class') === 'content-inside') {
        this.router.navigate([event.target.getAttribute('href')]);
        event.preventDefault();
      } else {
        return;
      }
  }