Q:

How to intercept dynamic links in Ionic 3

I was searching the entire Forum and google and I didn’t found a solution for this problem.
We have an Ionic 2 (now 3) App that integrate our software (communication solution) with Android and IOS. I’m grateful that Ionic help me with, for sure. My app is pretty much load webservices (REST) from our main platform and loading into the app.
In this specific part I have a json content load that can include some html features inside it . Like emoctions (that’s ok) and links that user put in when it’s posting. This links is basically http://www.example.com/profile/userid1 , like facebook feature (mark friends).
When my app is running the app tried to open in Browser this links, but I want to intercept them and open with NavController to push my profile page inside App.
So I need to look inside a json variable (innerHTML) to find this links and split them to get the Id and open inside my App, replace this external clicks.
What I tried:
I tried to treat with replace before show the inner html
funReplaceMarkedUsers(text){
    return text.replace(/href=/gm, “(click)=funPushProfile()”);
}

Ionic seemed to not understand this live change and call the function.
I think if I find a way to intercept the click is better. Like is dynamic generated I can’t change this links before to put some click function.
I found some problems like mine:
http://intown.biz/2014/03/30/cordova-ionic-links-in-browser/2
But every solution is with Ionic 1.
Anyway. I’m not the person who asks for help without search all the situation and tried a lot to find solutions, but nothing seems to help me. Anyone has any idea how to solve problems like this?
I appreciate any help you can provide for me.
Thanks

A:

The home.ts
export class HomePage {
  appName = 'Ionic App';
  html ='<a href="https://plnkr.co" >Link</a>';

  constructor(public navController: NavController, public renderer: Renderer, private elRef:ElementRef) { }

  ionViewDidLoad() {
    let link = this.elRef.nativeElement.querySelector('a');
    let global = this.renderer.listen(link, 'click', (evt) => {
      console.log(link.getAttribute('href'));
      return false;
    })
  }
}

In template:
<ion-content padding>
  <div [innerHTML]="html"></div>
</ion-content>

Plnkr link

